import type { DoctorListData } from "@/features/doctor/lib/data";
import formatPhone from "@/shared/lib/formatPhone";
import { Button } from "@/shared/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/shared/ui/dropdown-menu";
import type { ColumnDef } from "@tanstack/react-table";
import { Edit, EllipsisVertical, Eye } from "lucide-react";
import type { NavigateFunction } from "react-router-dom";

interface Props {
  router: NavigateFunction;
  onDeleteClick: (district: DoctorListData) => void;
}

export const columns = ({ router }: Props): ColumnDef<DoctorListData>[] => [
  {
    accessorKey: "id",
    header: () => <div className="text-center">№</div>,
    cell: ({ row }) => {
      return <div className="text-center font-medium">{row.index + 1}</div>;
    },
  },
  {
    accessorKey: "name",
    header: () => <div className="text-center">Ismi</div>,
    cell: ({ row }) => {
      return (
        <div className="text-center font-medium">
          {row.original.first_name} {row.original.last_name}
        </div>
      );
    },
  },
  {
    accessorKey: "districtName",
    header: () => <div className="text-center">Ish joyi</div>,
    cell: ({ row }) => {
      return (
        <div className="text-center font-medium">{row.original.work_place}</div>
      );
    },
  },
  {
    accessorKey: "phone",
    header: () => <div className="text-center">Telefon raqami</div>,
    cell: ({ row }) => {
      return (
        <div className="text-center font-medium">
          {formatPhone(row.original.phone_number)}
        </div>
      );
    },
  },
  {
    id: "actions",
    header: () => <div className="text-center">Amallar</div>,
    cell: ({ row }) => {
      const obj = 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-blue-400 hover:text-white text-white bg-blue-400"
              onClick={() => router(`/physician/detail/${row.original.id}`)}
            >
              <Eye size={16} /> Batafsil
            </Button>
            <Button
              variant={"ghost"}
              className="flex items-center gap-1 px-4 py-2 w-full text-left hover:bg-blue-400 hover:text-white text-white bg-blue-400"
              onClick={() =>
                router(
                  `/object/location?id=${obj.id}&lat=${obj.latitude}&lon=${obj.longitude}}`,
                )
              }
            >
              <Eye size={16} /> {"Lokatsiyani ko'rish"}
            </Button>
            <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={() => router(`/physician/edit/${obj.id}`)}
            >
              <Edit size={16} /> Tahrirlash
            </Button>
            {/* <Button
              variant={"destructive"}
              size={"lg"}
              className="cursor-pointer"
              onClick={() => onDeleteClick(obj)}
            >
              <Trash size={16} /> {"O'chirish"}
            </Button> */}
          </DropdownMenuContent>
        </DropdownMenu>
      );
    },
  },
];