import {
  Button,
  Separator,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@repo/shadcn-ui/components";
import { Table } from "@tanstack/react-table";
import { t } from "i18next";
import { CopyPlusIcon, ScanIcon, Trash2Icon } from "lucide-react";
import { AppendEmptyRowButton } from "../buttons";

export const CustomerInvoiceItemsSortableDataTableToolbar = ({ table }: { table: Table<any> }) => {
  const selectedRowsCount = table.getSelectedRowModel().rows.length;

  if (selectedRowsCount) {
    return (
      <nav className='flex items-center h-12 p-1 rounded-md text-muted-foreground bg-muted '>
        <div className='flex items-center gap-2'>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type='button'
                variant='link'
                disabled={!table.getSelectedRowModel().rows.length}
                onClick={() => table.options.meta?.duplicateItems()}
              >
                <CopyPlusIcon className='w-4 h-4 sm:mr-2' />
                <span className='sr-only sm:not-sr-only'>
                  {t("common.duplicate_selected_rows")}
                </span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>{t("common.duplicate_selected_rows_tooltip")}</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type='button'
                variant='link'
                disabled={!table.getSelectedRowModel().rows.length}
                onClick={() => table.options.meta?.deleteItems()}
              >
                <Trash2Icon className='w-4 h-4 sm:mr-2' />
                <span className='sr-only sm:not-sr-only'>{t("common.remove_selected_rows")}</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>{t("common.remove_selected_rows_tooltip")}</TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type='button'
                variant='link'
                disabled={!table.getSelectedRowModel().rows.length}
                onClick={() => table.resetRowSelection()}
              >
                <ScanIcon className='w-4 h-4 sm:mr-2' />
                <span className='sr-only sm:not-sr-only'>{t("common.reset_selected_rows")}</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>{t("common.reset_selected_rows_tooltip")}</TooltipContent>
          </Tooltip>
          <Separator orientation='vertical' className='h-6 ml-1 mr-4' />
          <p className='text-sm font-normal'>
            {t("common.rows_selected", { count: selectedRowsCount })}
          </p>
        </div>
      </nav>
    );
  }

  return (
    <nav className='flex items-center h-12 p-1 rounded-md bg-accent/75 text-muted-foreground'>
      <div className='flex space-x-2'>
        <Tooltip>
          <TooltipTrigger asChild>
            <AppendEmptyRowButton variant='link' onClick={() => table.options.meta?.appendItem()} />
          </TooltipTrigger>
          <TooltipContent>{t("common.append_empty_row_tooltip")}</TooltipContent>
        </Tooltip>
      </div>
      <div className='flex items-center gap-2 ml-auto' />
    </nav>
  );
};
