import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  Button,
} from "@/ui";
import { Row, RowData, Table } from "@tanstack/react-table";
import { t } from "i18next";
import { ChevronDownIcon, ChevronUpIcon, CopyIcon, Trash2Icon } from "lucide-react";

export const QuoteItemsInlineRowActions = <TData extends RowData>({ row, table, onDelete, confirmDelete = true }: {
  row: Row<TData>;
  table: Table<TData>;
  onDelete: () => void;
  confirmDelete?: boolean;
}) => {
  const handleDelete = () => {
    table.options.meta?.deleteItems(row.index);
    onDelete();
  };

  return (
    <div className='flex flex-wrap items-center gap-2'>
    <Button type='button' variant='outline' size='sm' onClick={() => table.options.meta?.insertItem(row.index)}>
      <ChevronUpIcon className='w-4 h-4 mr-2' />
      {t("common.insert_row_above")}
    </Button>
    <Button
      type='button'
      variant='outline'
      size='sm'
      onClick={() => table.options.meta?.insertItemBelow
        ? table.options.meta.insertItemBelow(row.index)
        : table.options.meta?.insertItem(row.index + 1)}
    >
      <ChevronDownIcon className='w-4 h-4 mr-2' />
      {t("common.insert_row_below")}
    </Button>
    <Button type='button' variant='outline' size='sm' onClick={() => table.options.meta?.duplicateItems(row.index)}>
      <CopyIcon className='w-4 h-4 mr-2' />
      {t("common.duplicate_row")}
    </Button>
      {confirmDelete ? <AlertDialog>
        <AlertDialogTrigger asChild>
          <Button type='button' variant='destructive' size='sm'>
            <Trash2Icon className='w-4 h-4 mr-2' />
            {t("common.remove_row")}
          </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t("quotes.inline_row_actions.delete_confirmation.title")}</AlertDialogTitle>
            <AlertDialogDescription>
              {t("quotes.inline_row_actions.delete_confirmation.description")}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
            <AlertDialogAction asChild>
              <Button type='button' variant='destructive' onClick={handleDelete}>
                {t("quotes.inline_row_actions.delete_confirmation.confirm")}
              </Button>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog> : <Button type="button" variant="destructive" size="sm" onClick={handleDelete}>
        <Trash2Icon className="w-4 h-4 mr-2" />{t("common.remove_row")}
      </Button>}
    </div>
  );
};