import { LoaderCircleIcon, X } from 'lucide-react';
import React from 'react';
import { useIntl } from 'react-intl';
import { Button } from '#shared/ui/Button';
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '#shared/ui/Dialog';
import { useDelete } from '../../api/delete';
import { invalidateList } from '../../api/list';

export const DeleteTrigger: React.FC<
  React.PropsWithChildren<{
    id: number;
    deleteTarget?: React.ReactNode;
  }>
> = ({ id, deleteTarget, children }) => {
  const intl = useIntl();

  const mutationDelete = useDelete();

  const handleDelete = () => {
    mutationDelete.mutate(
      { id: id },
      {
        onSuccess() {
          invalidateList();
        }
      }
    );
  };

  return (
    <Dialog>
      <DialogTrigger asChild>
        {children ? (
          children
        ) : (
          <Button variant="destructive" size="sm" shape="default" mode="icon">
            <X />
          </Button>
        )}
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{intl.formatMessage({ id: 'ACTION.CONFIRM' })}</DialogTitle>
          <DialogDescription className="sr-only"></DialogDescription>
        </DialogHeader>
        <DialogBody className="text-sm">
          {deleteTarget ? (
            <React.Fragment>
              {intl.formatMessage(
                { id: 'MODULE.COMMON.REMOVE_ITEM_QUESTION' },
                { target: deleteTarget }
              )}
              <span className="ml-1">
                {intl.formatMessage({
                  id: 'MODULE.COMMON.REMOVE_ITEM_QUESTION_DESC'
                })}
              </span>
            </React.Fragment>
          ) : (
            intl.formatMessage({ id: 'MODULE.COMMON.ARE_YOU_SURE?' }) +
            ' ' +
            intl.formatMessage({
              id: 'MODULE.COMMON.REMOVE_ITEM_QUESTION_DESC'
            })
          )}
        </DialogBody>
        <DialogFooter>
          <Button variant="destructive" disabled={mutationDelete.isPending} onClick={handleDelete}>
            {mutationDelete.isPending ? (
              <span className="flex items-center gap-2">
                <LoaderCircleIcon className="h-4 w-4 animate-spin" />
                {intl.formatMessage({ id: 'STATE.REMOVING' })}...
              </span>
            ) : (
              intl.formatMessage({ id: 'ACTION.REMOVE' })
            )}
          </Button>

          <DialogClose asChild>
            <Button variant="outline">{intl.formatMessage({ id: 'ACTION.CANCEL' })}</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};