import type { Meta, StoryObj } from '@storybook/react-vite'
import { DataTable, DataTableColumn } from '@components/ui/data-table/data-table'
import {
  countryArrayColumn,
  FrontendSort,
  numberColumn,
  percentageColumn,
  sortData,
  stringColumn,
} from '@components/ui/data-table/utils/columns'
import { useState } from 'react'

const meta: Meta<typeof DataTable> = {
  title: 'Data Table',
  component: DataTable,
  tags: ['autodocs'],
} satisfies Meta<typeof DataTable>

export default meta

type Data = {
  name: string
  percentage: string
  groups: number
  email: string
  risk: 'Low' | 'Medium' | 'High'
  country: {
    code: string
    label: string
    hoverLabel?: string
  }[]
}

const data: Data[] = [
  {
    name: 'Charissa Byrd',
    percentage: '82.5',
    groups: 3,
    email: 'lacus@icloud.org',
    risk: 'Low',
    country: [
      { code: 'CN', label: 'China' },
      { code: 'BR', label: 'Brazil' },
    ],
  },
  {
    name: 'Eagan Mclaughlin',
    percentage: '59.6',
    groups: 2,
    email: 'vivamus.molestie@outlook.net',
    risk: 'High',
    country: [
      { code: 'FR', label: 'France' },
      { code: 'AG', label: 'Antigua' },
    ],
  },
  {
    name: 'Howard Hicks',
    percentage: '75.4',
    groups: 7,
    email: 'sodales@outlook.couk',
    risk: 'Medium',
    country: [
      { code: 'NG', label: 'Nigeria' },
      { code: 'ZA', label: 'South Africa' },
    ],
  },
  {
    name: 'Richard Miller',
    percentage: '56.1',
    groups: 5,
    email: 'quisque@google.com',
    risk: 'Low',
    country: [
      { code: 'BR', label: 'Brazil' },
      { code: 'CN', label: 'China' },
    ],
  },
  {
    name: 'Carolyn Valenzuela',
    percentage: '61.3',
    groups: 6,
    email: 'sed@google.couk',
    risk: 'High',
    country: [
      { code: 'AU', label: 'Australia', hoverLabel: 'optional hover label for Australia' },
      { code: 'UK', label: 'United Kingdom' },
    ],
  },
]
type ColumnId = 'name' | 'percentage' | 'groups' | 'email' | 'risk-level' | 'country'

const columns: DataTableColumn<Data, ColumnId>[] = [
  stringColumn<Data, ColumnId>((item) => ({ label: item.name, onClick: () => alert(item.name) }), {
    title: 'Name',
    id: 'name',
    width: 150,
  }),
  percentageColumn<Data, ColumnId>((item) => item.percentage, { title: 'Percentage', id: 'percentage', width: 90 }),
  numberColumn<Data, ColumnId>((item) => item.groups, { title: 'Groups', id: 'groups', width: 60 }),
  stringColumn<Data, ColumnId>((item) => item.email, { title: 'Email', id: 'email', width: 200 }),
  stringColumn<Data, ColumnId>((item) => item.risk, {
    title: 'Risk Level',
    id: 'risk-level',
    width: 80,
    themeOverride: (item) => ({
      textDark: item.risk === 'High' ? '#f82c2c' : item.risk === 'Medium' ? '#ffa501' : '#648558',
    }),
  }),
  countryArrayColumn((item) => item.country, {
    title: 'Country',
    id: 'country',
    width: 200,
  }),
]

const ExampleTable = () => {
  const [currentSort, setCurrentSort] = useState<FrontendSort<Data, ColumnId>>({
    order: null,
    field: null,
  })

  const sortHandler = (field: ColumnId, sort: 'asc' | 'desc' | null) => {
    console.log('sortHandler: ', field, sort, 'currentSort: ', currentSort, 'columns: ', columns, '')
    const column = columns.find((col) => col.id === field)

    if (sort === null || !column) {
      setCurrentSort({ order: null, field: null })
      return
    }

    setCurrentSort({ order: sort, sortComparator: column.sortComparator, field })
  }

  return (
    <DataTable
      data={sortData<Data, ColumnId>(currentSort, data ?? [])}
      columns={columns}
      currentSort={currentSort.order ? currentSort : undefined}
      sortHandler={sortHandler}
    />
  )
}
export const Default: StoryObj<typeof meta> = {
  render: () => <ExampleTable />,
}
