import { useCallback, useState, type ComponentProps, type ReactElement } from 'react';
import { CircleX } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip.js';
import { DocumentType } from '../../../gql/graphql.js';
import { useCloseDocument } from '../../../hooks/use-close-document.js';
import { Button } from '../../ui/button.js';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog.js';
import { ConfirmationModal, PreviewDocumentModal } from '../index.js';

type Props = ComponentProps<typeof Button> & {
  documentId: string;
  couldIssueCreditInvoice: boolean;
};

export function CloseDocumentButton({
  documentId,
  couldIssueCreditInvoice,
  ...props
}: Props): ReactElement {
  const { closeDocument } = useCloseDocument();
  const [open, setOpen] = useState(false);
  const [previewCreditInvoice, setPreviewCreditInvoice] = useState(false);

  const onFinallyClose = useCallback(() => {
    closeDocument({ documentId });
  }, [closeDocument, documentId]);

  if (!couldIssueCreditInvoice) {
    return (
      <ConfirmationModal
        onConfirm={onFinallyClose}
        title="Are you sure you want to close this document?"
      >
        <Button className="size-7.5 text-red-600" variant="ghost" {...props}>
          <Tooltip>
            <TooltipTrigger>
              <CircleX className="size-5" />
            </TooltipTrigger>
            <TooltipContent>
              <p>Close Document</p>
            </TooltipContent>
          </Tooltip>
        </Button>
      </ConfirmationModal>
    );
  }

  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button
            className="size-7.5 text-red-600"
            variant="ghost"
            {...props}
            onClick={() => setOpen(true)}
          >
            <CircleX className="size-5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>Close Document</p>
        </TooltipContent>
      </Tooltip>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Should Issue Credit Invoice?</DialogTitle>
          </DialogHeader>

          <DialogFooter>
            <Button
              onClick={() => {
                setOpen(false);
                onFinallyClose();
              }}
              variant="secondary"
            >
              Just Close
            </Button>
            <Button
              onClick={() => {
                setOpen(false);
                setPreviewCreditInvoice(true);
              }}
              variant="default"
            >
              Issue Credit Invoice
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      <PreviewDocumentModal
        documentId={documentId}
        documentType={DocumentType.CreditInvoice}
        open={previewCreditInvoice}
        setOpen={setPreviewCreditInvoice}
      />
    </>
  );
}