import type { DistributedListData } from "@/features/distributed/lib/data";
import { Button } from "@/shared/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/shared/ui/dropdown-menu";
import type { ColumnDef } from "@tanstack/react-table";
import { EllipsisVertical, Eye } from "lucide-react";

interface ColumnProps {
  handleEdit: (district: DistributedListData) => void;
}

export const columnsDistributed = ({
  handleEdit,
}: ColumnProps): ColumnDef<DistributedListData>[] => [
  {
    accessorKey: "id",
    header: () => <div className="text-center">№</div>,
    cell: ({ row }) => (
      <div className="text-center font-medium">{row.index + 1}</div>
    ),
  },
  {
    accessorKey: "name",
    header: () => <div className="text-center">Xaridoring ismi</div>,
    cell: ({ row }) => (
      <div className="text-center font-medium">
        {row.original.employee_name}
      </div>
    ),
  },
  {
    accessorKey: "name-product",
    header: () => <div className="text-center">Mahsulot nomi</div>,
    cell: ({ row }) => (
      <div className="text-center font-medium">{row.original.product.name}</div>
    ),
  },
  {
    accessorKey: "name-product",
    header: () => <div className="text-center">Soni</div>,
    cell: ({ row }) => (
      <div className="text-center font-medium">{row.original.quantity}</div>
    ),
  },
  {
    id: "actions",
    header: () => <div className="text-center">Amallar</div>,
    cell: ({ row }) => {
      const district = row.original;

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="w-full h-full hover:bg-gray-100">
              <EllipsisVertical className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="center" className="flex flex-col gap-1">
            <Button
              variant="ghost"
              className="flex items-center gap-1 px-4 py-2 w-full text-left hover:bg-green-400 hover:text-white text-white bg-green-400"
              onClick={() => handleEdit(district)}
            >
              <Eye size={16} />
              <p>Batafsil</p>
            </Button>
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];