import { AiroButton, buttonVariants } from '@workspace/airo-ui/components/AiroButton';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPortal,
  AlertDialogTitle,
} from '@workspace/airo-ui/components/alert-dialog';
import CloseSvg from '@workspace/airo-ui/components/close.svg';
import { useImperativeHandle, useState } from 'react';

// Defining the AlertDialogComponent with internal state and onShow prop
const AlertDialogComponent = ({
  ref,
  title,
  description,
  cancelText = 'Cancel',
  confirmText = 'Confirm',
  onConfirm,
}) => {
  const [open, setOpen] = useState(false);

  function show() {
    setOpen(true);
  }

  useImperativeHandle(ref, () => ({
    show,
  }));
  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogPortal>
        <AlertDialogContent className={'py-[30px] sm:rounded-[25px]'}>
          <div className={'absolute right-4 top-6'} onClick={() => setOpen(false)}>
            <CloseSvg />
          </div>
          <AlertDialogHeader>
            <AlertDialogTitle className={'text-[#E22C2E]'}>{title}</AlertDialogTitle>
            <AlertDialogDescription className={'text-base font-light'}>
              {description}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter className={'sm:justify-center'}>
            <AlertDialogAction asChild className={buttonVariants({ variant: 'primary' })}>
              <AiroButton variant={'primary'} onClick={onConfirm}>
                {confirmText}
              </AiroButton>
            </AlertDialogAction>
            <AlertDialogCancel asChild className={buttonVariants({ variant: 'danger' })}>
              <AiroButton variant={'danger'}>{cancelText}</AiroButton>
            </AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogPortal>
    </AlertDialog>
  );
};

export default AlertDialogComponent;