<template>
  <div class="list-test">
    <div class="list-test__header">
      <router-link to="/" class="list-test__back">
        <font-awesome-icon :icon="['fas', 'arrow-left']" />
        <span>Back to Dashboard</span>
      </router-link>
      <h1 v-tooltip="'List Component Test'">List Component Test</h1>
    </div>

    <!-- Default Presentation -->
    <section class="list-test__section">
      <h2>Default Presentation</h2>
      <List
        :actions="listActions"
        :columns="columns"
        :data="data"
        :filter="{ placeholder: 'Search users...' }"
        @row-click="handleRowClick"
        @row-dblclick="handleRowDblClick"
        :CSVDownload="'users'"
        :XLSXDownload="'users'"
        @download="logDownloadAction"
      />
    </section>

    <!-- Minimal Presentation -->
    <section class="list-test__section">
      <h2>Minimal Presentation</h2>
      <List
        :actions="listActions"
        :columns="columns"
        :data="data"
        presentation="minimal"
        width="50em"
        :filter="{ placeholder: 'Search users...' }"
        @row-click="handleRowClick"
        @row-dblclick="handleRowDblClick"
        :CSVDownload="'user-list'"
        :XLSXDownload="'user-list.xlsx'"
      />
    </section>

    <!-- Loading State -->
    <section class="list-test__section">
      <h2>Loading State</h2>
      <List
        :columns="columns"
        :data="[]"
        :loading="true"
        :filter="{ placeholder: 'Search users...' }"
      />
    </section>

    <!-- Empty State -->
    <section class="list-test__section">
      <h2>Empty State</h2>
      <List
        :columns="columns"
        :data="[]"
        empty-message="No users found"
        :filter="{ placeholder: 'Search users...' }"
      />
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import List from '@/components/List.vue'
import type {
  ListColumn,
  ListActionProps,
  ListCheckboxProps,
  ListIconProps,
  ListRowData,
  ListDownloadPayload,
} from '@/types'

const autosaveActive = (info: any) => {
  console.log('Autosave active', info)
}

const logDownloadAction = (payload: ListDownloadPayload) => {
  console.log(`Download requested in format: ${payload.type}, file name: ${payload.fileName}`)
}

const listActionClick = (row: any, action: ListActionProps) => {
  if (!row && action) {
    console.log('List action clicked:', row, action)
  }
}

const selectClick = (row: any, itemKey: string) => {
  if (row && itemKey) {
    console.log('Select clicked:', row, itemKey)
  }
}

const rowActionClick = (row: any, action: ListActionProps) => {
  if (row && action) {
    console.log('Action clicked:', row, action)
  }
}

const handleRowClick = (row: any, index: number) => {
  console.log('Row clicked:', row, index)
  if (row?.select) {
    row.select.modelValue = !row.select.modelValue
  } else {
    row.selected = !row.selected
  }
}

const handleRowDblClick = (row: any, index: number) => {
  console.log('Row double-clicked:', row, index)
}

const listActions = ref<ListActionProps[]>([
  {
    id: 'new-user',
    label: 'New user',
    icon: 'add',
    color: 'var(--primary-color)',
    tooltip: 'Create a new user account',
    onActionClick: listActionClick,
  },
])

const columns: ListColumn[] = [
  {
    key: 'select',
    label: '',
    type: 'checkbox',
    sortable: false,
    filterable: false,
    align: 'center',
    width: '4rem',
  },
  {
    key: 'status',
    label: 'Status',
    type: 'icon',
    sortable: false,
    filterable: false,
    align: 'center',
    width: '4rem',
    headerTooltip: 'User status indicator',
  },
  {
    key: 'name',
    label: 'Name',
    type: 'text',
    sortable: true,
    filterable: true,
    headerTooltip: 'The full name of the user',
    cellTooltip: true,
  },
  {
    key: 'email',
    label: 'Email',
    type: 'email',
    sortable: true,
    filterable: true,
    headerTooltip: 'Contact email address',
    cellTooltip: true,
    cellClasses: {
      lightredEmail: (value: any) => value.includes('bob'),
    },
  },
  {
    key: 'joined',
    label: 'Joined',
    type: 'date',
    sortable: true,
    width: '8rem',
    headerTooltip: 'Account creation date',
    cellTooltip: true,
  },
  {
    key: 'active',
    label: 'Active',
    type: 'checkbox',
    align: 'center',
    sortable: true,
    width: '4rem',
    headerTooltip: 'Account active status',
  },
  {
    key: 'actions',
    label: 'Actions',
    type: 'action',
    align: 'right',
    width: '12rem',
  },
]

const data = ref<ListRowData[]>([
  {
    // This row will always appear at the top when sorting
    excludeFromSort: true,
    fixed: 'top',
    selected: false,
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    status: <ListIconProps>{
      icon: 'crown',
      color: 'gold',
    },
    name: 'Current User (Fixed at Top)',
    email: 'current@example.com',
    joined: '2024-01-01',
    active: {
      modelValue: true,
      disabled: false,
      autosave: autosaveActive,
      onCheckboxClick: selectClick,
    },
    actions: <ListActionProps[]>[
      {
        id: 'edit',
        label: 'Edit',
        icon: 'edit',
        tooltip: 'Edit user details',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    class: 'testclass',
    selected: false,
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    status: <ListIconProps>{
      icon: 'star',
      color: 'lightgray',
    },
    name: 'John Doe',
    email: 'john@example.com',
    joined: '2023-01-15',
    active: {
      modelValue: true,
      disabled: false,
      autosave: autosaveActive,
      onCheckboxClick: selectClick,
    },
    actions: <ListActionProps[]>[
      {
        id: 'edit',
        label: 'Edit',
        icon: 'edit',
        tooltip: 'Edit user information',
        onActionClick: rowActionClick,
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'trash',
        color: 'var(--danger-color)',
        tooltip: 'Permanently delete this user',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    selected: false,
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    status: <ListIconProps>{
      icon: 'star',
      color: 'gold',
    },
    name: 'Jane Smith',
    email: 'jane@example.com',
    joined: '2023-02-20',
    active: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      autosave: autosaveActive,
    },
    actions: <ListActionProps[]>[
      {
        id: 'edit',
        label: 'Edit',
        icon: 'edit',
        onActionClick: rowActionClick,
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'trash',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    name: 'Alice Johnson',
    email: 'alice@example.com',
    joined: '2024-01-10',
    active: <ListCheckboxProps>{
      modelValue: true,
      disabled: false,
    },
    actions: <ListActionProps[]>[
      {
        id: 'edit',
        label: 'Edit',
        icon: 'edit',
        onActionClick: rowActionClick,
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'trash',
        disabled: true,
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    name: 'Bob Wilson',
    email: 'bob@example.com',
    active: <ListCheckboxProps>{
      modelValue: true,
      disabled: true,
    },
    actions: <ListActionProps[]>[
      {
        id: 'view',
        label: 'View',
        icon: 'eye',
        tooltip: 'View user profile',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    name: 'Carol Brown',
    email: 'carol@example.com',
    joined: '2023-08-30',
    active: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
    },
    actions: <ListActionProps[]>[
      {
        id: 'edit',
        label: 'Edit',
        icon: 'edit',
        onActionClick: rowActionClick,
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'trash',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    name: 'David Miller',
    email: 'david@example.com',
    joined: '2024-02-01',
    active: <ListCheckboxProps>{
      modelValue: true,
      disabled: false,
    },
    actions: <ListActionProps[]>[
      {
        id: 'edit',
        label: 'Edit',
        icon: 'edit',
        onActionClick: rowActionClick,
      },
      {
        id: 'delete',
        label: 'Delete',
        icon: 'trash',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    name: 'Eva Garcia',
    email: 'eva@example.com',
    joined: '2023-05-15',
    active: {
      modelValue: true,
      disabled: false,
    },
    actions: <ListActionProps[]>[
      {
        id: 'view',
        label: 'View',
        icon: 'eye',
        tooltip: 'View user profile',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    name: 'Frank Lee',
    email: 'frank@example.com',
    joined: '2023-12-20',
    active: {
      modelValue: false,
      disabled: true,
    },
    actions: <ListActionProps[]>[
      {
        id: 'view',
        label: 'View',
        icon: 'eye',
        tooltip: 'View user profile',
        onActionClick: rowActionClick,
      },
    ],
  },
  {
    // This row will always appear at the bottom when sorting and is excluded from filtering
    excludeFromSort: true,
    excludeFromFilter: true,
    fixed: 'bottom',
    select: <ListCheckboxProps>{
      modelValue: false,
      disabled: false,
      onCheckboxClick: selectClick,
    },
    status: <ListIconProps>{
      icon: 'info-circle',
      color: 'blue',
    },
    name: 'Footer Row (Fixed at Bottom)',
    email: 'footer@example.com',
    joined: '2024-12-31',
    active: {
      modelValue: true,
      disabled: false,
    },
    actions: <ListActionProps[]>[
      {
        id: 'info',
        label: 'Info',
        icon: 'info',
        tooltip: 'View additional information about this row',
        onActionClick: rowActionClick,
      },
    ],
  },
])
</script>

<style scoped>
.list-test {
  padding: 2rem;
}

.list-test__header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.list-test__back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.list-test__back:hover {
  color: var(--primary);
}

.list-test__section {
  margin-bottom: 3rem;
}

.list-test__section h2 {
  margin-bottom: 1rem;
  color: var(--text-primary);
}

:deep(.list-test__section .list__cell.lightredEmail) {
  background-color: rgba(255, 0, 0, 0.1);
}

:deep(.list-test__section .list__row--testclass) {
  background-color: rgba(155, 155, 0, 0.1);
}
</style>
