"use client"

import * as React from "react"
import { ColumnDef } from "@tanstack/react-table"
import type { Row } from "@tanstack/react-table"
import { numericFilter } from "@/lib/data-table"
import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header"
import { formatDate } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuSeparator,
    DropdownMenuShortcut,
    DropdownMenuSub,
    DropdownMenuSubContent,
    DropdownMenuSubTrigger,
    DropdownMenuTrigger,
  } from "@/components/ui/dropdown-menu"
import { Ellipsis } from "lucide-react"
import { Tag } from "@/types/vendorData"
import { createFilterFn } from "@/components/client-data-table/table-filters"


export interface DataTableRowAction<TData> {
  row: Row<TData>
  type: 'open' | "update" | "delete"
}

interface GetColumnsProps {
    setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<Tag> | null>>
}

export function getColumns({
    setRowAction,
  }: GetColumnsProps): ColumnDef<Tag>[] {
    return [
      {
        id: "select",
        header: ({ table }) => (
          <Checkbox
            checked={
              table.getIsAllPageRowsSelected() ||
              (table.getIsSomePageRowsSelected() && "indeterminate")
            }
            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
            aria-label="Select all"
            className="translate-y-0.5"
          />
        ),
        cell: ({ row }) => (
          <Checkbox
            checked={row.getIsSelected()}
            onCheckedChange={(value) => row.toggleSelected(!!value)}
            aria-label="Select row"
            className="translate-y-0.5"
          />
        ),
        enableSorting: false,
        enableHiding: false,
        size: 40,
      },

      {
        accessorKey: "tagNo",
        header: ({ column }) => (
          <ClientDataTableColumnHeaderSimple column={column} title="Tag No." />
        ),
        filterFn: createFilterFn("text"),
        cell: ({ row }) => <div className="w-20">{row.getValue("tagNo")}</div>,
        meta: {
          excelHeader: "Tag No"
        },
      },
      {
        accessorKey: "description",
        header: ({ column }) => (
          <ClientDataTableColumnHeaderSimple column={column} title="Tag Description" />
        ),
        cell: ({ row }) => <div className="w-120">{row.getValue("description")}</div>,
        meta: {
          excelHeader: "Tag Descripiton"
        },
      },
      {
        accessorKey: "tagType",
        header: ({ column }) => (
          <ClientDataTableColumnHeaderSimple column={column} title="Tag Type" />
        ),
        cell: ({ row }) => <div className="w-40">{row.getValue("tagType")}</div>,
        meta: {
          excelHeader: "Tag Type"
        },
      },
      {
        id: "validation",
        header: "Error",
        cell: ({ row }) => <div className="w-100"></div>,
      },

      {
        accessorKey: "createdAt",
        header: ({ column }) => (
          <ClientDataTableColumnHeaderSimple column={column} title="Created At" />
        ),
        cell: ({ cell }) => formatDate(cell.getValue() as Date),
        meta: {
          excelHeader: "created At"
        },
      },
      {
        accessorKey: "updatedAt",
        header: ({ column }) => (
          <ClientDataTableColumnHeaderSimple column={column} title="Updated At" />
        ),
        cell: ({ cell }) => formatDate(cell.getValue() as Date),
        meta: {
          excelHeader: "updated At"
        },
      },

      {
        id: "actions",
        cell: function Cell({ row }) {
          const [isUpdatePending, startUpdateTransition] = React.useTransition()
  
          return (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button
                  aria-label="Open menu"
                  variant="ghost"
                  className="flex size-8 p-0 data-[state=open]:bg-muted"
                >
                  <Ellipsis className="size-4" aria-hidden="true" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-40">
                <DropdownMenuItem
                  onSelect={() => setRowAction({ row, type: "update" })}
                >
                  Edit
                </DropdownMenuItem>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>Labels</DropdownMenuSubTrigger>
                  <DropdownMenuSubContent>
                    {/* <DropdownMenuRadioGroup
                      value={row.original.label}
                      onValueChange={(value) => {
                        startUpdateTransition(() => {
                          toast.promise(
                            updateTask({
                              id: row.original.id,
                              label: value as Task["label"],
                            }),
                            {
                              loading: "Updating...",
                              success: "Label updated",
                              error: (err) => getErrorMessage(err),
                            }
                          )
                        })
                      }}
                    >
                      {tasks.label.enumValues.map((label) => (
                        <DropdownMenuRadioItem
                          key={label}
                          value={label}
                          className="capitalize"
                          disabled={isUpdatePending}
                        >
                          {label}
                        </DropdownMenuRadioItem>
                      ))}
                    </DropdownMenuRadioGroup> */}
                  </DropdownMenuSubContent>
                </DropdownMenuSub>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  onSelect={() => setRowAction({ row, type: "delete" })}
                >
                  Delete
                  <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )
        },
        size: 40,
      },
    ]
  }