import { type ColumnDef } from '@tanstack/react-table'
import { type RecipeDashboard } from '@/models/recipe/schema'
import { Checkbox } from '@/components/ui/checkbox'
import DataTableColumnHeader from './data-table-column-header'
// import { Badge } from '@/components/ui/badge'
import DataTableRowActions from './data-table-row-actions'
import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'
import * as dateFormat from 'date-fns'
import { DateRange } from 'react-day-picker'

export const columns: ColumnDef<RecipeDashboard>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
        className="translate-y-[2px]"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={value => row.toggleSelected(!!value)}
        aria-label="Select row"
        className="translate-y-[2px]"
      />
    ),
    enableSorting: false,
    enableHiding: false
  },
  {
    accessorKey: 'productCode',
    header: ({ column }) => <DataTableColumnHeader column={column} title="ProductCode" />,
    cell: ({ row }) => <div>{row.getValue('productCode')}</div>,
    enableHiding: false,
    enableGlobalFilter: true,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    }
  },
  {
    accessorKey: 'name',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
    cell: ({ row }) => {
      //const label = { label: 'Test Label' } // labels.find(label => label.value === row.getValue('label'))

      return (
        <div className="flex space-x-2">
          {/* {label && <Badge variant="outline">{label.label}</Badge>} */}
          <span className="max-w-[500px] truncate font-medium">{row.getValue('name')}</span>
        </div>
      )
    },
    enableGlobalFilter: true,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    }
  },
  {
    accessorKey: 'nameEng',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Name ENG" />,
    cell: ({ row }) => {
      return (
        <div className="flex items-center">
          <span>{row.getValue('nameEng')}</span>
        </div>
      )
    },
    enableGlobalFilter: true,
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    }
  },
  {
    accessorKey: 'inUse',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Active" />,
    cell: ({ row }) => {
      return (
        <div className="flex items-center">
          <span>
            {row.getValue('inUse') ? (
              <CheckCircledIcon className="h-6 w-6 text-green-700" />
            ) : (
              <CrossCircledIcon className="h-6 w-6 text-red-700" />
            )}
          </span>
        </div>
      )
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id))
    }
  },
  {
    accessorKey: 'lastUpdated',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Updated" isDate />,
    cell: ({ row }) => {
      return (
        <div className="flex items-center">
          <span>{dateFormat.format(row.getValue('lastUpdated'), 'dd-MM-yyyy HH:mm:ss')}</span>
        </div>
      )
    },
    filterFn: (_row, _id, _value) => {
      const value = _value as DateRange
      const rowValue = _row.getValue(_id) as Date
      return (
        dateFormat.isAfter(rowValue, value.from || dateFormat.add(rowValue, { days: 1 })) &&
        dateFormat.isBefore(rowValue, value.to || dateFormat.sub(rowValue, { days: 1 }))
      )
    }
  },
  {
    id: 'actions',
    cell: ({ row }) => <DataTableRowActions row={row} />
  }
]