import {
  Button,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Separator,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/ui";
import { Table } from "@tanstack/react-table";
import {
  CalendarIcon,
  CirclePlusIcon,
  ClockIcon,
  CopyPlusIcon,
  ForwardIcon,
  MoreVerticalIcon,
  ReplyAllIcon,
  ReplyIcon,
  ScanIcon,
  Trash2Icon,
} from "lucide-react";

export const SortableDataTableToolbar = ({
  table,
}: {
  table: Table<unknown>;
}) => {
  const selectedRowsCount = table.getSelectedRowModel().rows.length;

  if (selectedRowsCount) {
    return (
      <div className="flex items-center h-12 p-1 text-white rounded-md bg-primary ">
        <div className="flex items-center gap-2">
          <Button>{`${selectedRowsCount} filas seleccionadas`}</Button>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                disabled={!table.getSelectedRowModel().rows.length}
                onClick={() => table.options.meta?.duplicateItems()}
              >
                <CopyPlusIcon className="w-4 h-4" />
                <span className="sm:sr-only">Duplicar</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              Duplica las fila(s) seleccionadas(s)
            </TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                disabled={!table.getSelectedRowModel().rows.length}
                onClick={() => table.options.meta?.deleteItems()}
              >
                <Trash2Icon className="w-4 h-4" />
                <span className="sm:sr-only">Eliminar</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Elimina las fila(s) seleccionada(s)</TooltipContent>
          </Tooltip>
          <Separator orientation="vertical" className="h-6 mx-1 bg-muted/50" />
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
                disabled={!table.getSelectedRowModel().rows.length}
                onClick={() => table.resetRowSelection()}
              >
                <ScanIcon className="w-4 h-4 md:mr-2" />
                <span className="sm:sr-only">Quitar selección</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Quita la selección</TooltipContent>
          </Tooltip>
        </div>
      </div>
    );
  }

  return (
    <div className="flex items-center h-12 p-1 rounded-md bg-muted/50 text-muted-foreground">
      <div className="flex items-center gap-2">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              onClick={() => table.options.meta?.appendItem()}
            >
              <CirclePlusIcon className="w-4 h-4" />
              <span className="sr-only">Añadir</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Añadir fila</TooltipContent>
        </Tooltip>

        <Separator
          orientation="vertical"
          className="h-6 mx-1 bg-muted-foreground/30"
        />
        <Tooltip>
          <Popover>
            <PopoverTrigger asChild>
              <TooltipTrigger asChild>
                <Button variant="ghost" size="icon">
                  <ClockIcon className="w-4 h-4" />
                  <span className="sr-only">Snooze</span>
                </Button>
              </TooltipTrigger>
            </PopoverTrigger>
            <PopoverContent className="flex w-[535px] p-0">
              <div className="flex flex-col gap-2 px-2 py-4 border-r">
                <div className="px-4 text-sm font-medium">Snooze until</div>
                <div className="grid min-w-[250px] gap-1">
                  <Button variant="ghost" className="justify-start font-normal">
                    Later today{" "}
                    <span className="ml-auto text-muted-foreground"></span>
                  </Button>
                  <Button variant="ghost" className="justify-start font-normal">
                    Tomorrow
                    <span className="ml-auto text-muted-foreground"></span>
                  </Button>
                  <Button variant="ghost" className="justify-start font-normal">
                    This weekend
                    <span className="ml-auto text-muted-foreground"></span>
                  </Button>
                  <Button variant="ghost" className="justify-start font-normal">
                    Next week
                    <span className="ml-auto text-muted-foreground"></span>
                  </Button>
                </div>
              </div>
              <div className="p-2">
                <CalendarIcon />
              </div>
            </PopoverContent>
          </Popover>
          <TooltipContent>Snooze</TooltipContent>
        </Tooltip>
      </div>
      <div className="flex items-center gap-2 ml-auto">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon">
              <ReplyIcon className="w-4 h-4" />
              <span className="sr-only">Reply</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Reply</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon">
              <ReplyAllIcon className="w-4 h-4" />
              <span className="sr-only">Reply all</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Reply all</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon">
              <ForwardIcon className="w-4 h-4" />
              <span className="sr-only">Forward</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>Forward</TooltipContent>
        </Tooltip>
      </div>
      <Separator
        orientation="vertical"
        className="h-6 mx-1 bg-muted-foreground/30"
      />
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon">
            <MoreVerticalIcon className="w-4 h-4" />
            <span className="sr-only">Columnas</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          {table.getAllColumns().map((column) => {
            return (
              <DropdownMenuCheckboxItem
                key={column.id}
                disabled={!column.getCanHide()}
                className="capitalize"
                checked={column.getIsVisible()}
                onCheckedChange={(value) => column.toggleVisibility(!!value)}
              >
                {column.id}
              </DropdownMenuCheckboxItem>
            );
          })}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
