'use client'

import { type ColumnDef } from '@tanstack/react-table'
import { EllipsisIcon, ReceiptTextIcon } from 'lucide-react'
import { NavLink } from 'react-router'

import { Button } from '@repo/ui/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@repo/ui/components/ui/dropdown-menu'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'

export type { Order }

export const columns: ColumnDef<Order>[] = [
  // {
  //   id: 'select',
  //   header: DataTableColumnHeaderSelect,
  //   cell: DataTableColumnSelect,
  //   meta: { className: 'w-9' }
  // },
  ...columns_,
  {
    id: 'action',
    cell: ActionMenu,
    meta: { className: 'w-12' }
  }
]

function ActionMenu({ row }: { row: any }) {
  return (
    <div className="flex justify-end items-center">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            className="data-[state=open]:bg-muted text-muted-foreground cursor-pointer"
            size="icon-sm"
          >
            <EllipsisIcon />
            <span className="sr-only">Abrir menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-36 *:cursor-pointer">
          <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
            <NavLink to={`${row.id}`}>
              {({ isPending }) => (
                <>
                  {isPending ? <Spinner /> : <ReceiptTextIcon />}
                  Detalhes
                </>
              )}
            </NavLink>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}