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

export const QuoteItemsSortableDataTableToolbar = ({ 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='ghost'
                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='ghost'
                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='ghost'
                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 mx-1 bg-muted-foreground' />
          <p className='text-sm'>{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='ghost'
              onClick={() => table.options.meta?.appendItem()}
            />
          </TooltipTrigger>
          <TooltipContent>{t("common.append_empty_row_tooltip")}</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <AppendCatalogArticleRowButton
              variant='ghost'
              onClick={() => {
                if (table.options.meta && table.options.meta.pickCatalogArticle) {
                  table.options.meta?.pickCatalogArticle();
                }
              }}
            />
          </TooltipTrigger>
          <TooltipContent>{t("common.append_article_tooltip")}</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <AppendBlockRowButton
              variant='ghost'
              onClick={() => {
                if (table.options.meta && table.options.meta.pickBlock) {
                  table.options.meta?.pickBlock();
                }
              }}
            />
          </TooltipTrigger>
          <TooltipContent>{t("common.append_block_tooltip")}</TooltipContent>
        </Tooltip>
      </div>
      <div className='flex items-center gap-2 ml-auto'></div>
    </nav>
  );
};
