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 { cn } from '@workspace/airo-ui/lib/utils';
import { Ref, useImperativeHandle, useState } from 'react';

interface AlertDialogComponentProps {
  ref: Ref<unknown>;
  title: string;
  description: string;
  cancelText?: string;
  confirmText?: string;
  onConfirm?: () => void;
  footerClassName?: string;
  wrapClassName?: string;
  descriptionClassName?: string;
}

// 定义ref可以访问的方法类型
export interface AlertDialogRef {
  show: () => void;
}

// Defining the AlertDialogComponent with internal state and onShow prop
const AlertDialogComponent: React.FC<AlertDialogComponentProps> = ({
  ref,
  title,
  description,
  cancelText = 'Cancel',
  confirmText = 'Confirm',
  onConfirm,
  footerClassName,
  wrapClassName,
  descriptionClassName,
}) => {
  const [open, setOpen] = useState(false);

  function show() {
    setOpen(true);
  }

  useImperativeHandle(
    ref,
    (): AlertDialogRef => ({
      show,
    }),
    [],
  );
  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogPortal>
        <AlertDialogContent className={cn('py-[30px] sm:rounded-[25px]', wrapClassName)}>
          <div className={'absolute right-4 top-6'} onClick={() => setOpen(false)}>
            <CloseSvg />
          </div>
          <AlertDialogHeader>
            <AlertDialogTitle className={'text-[#E22C2E]'}>{title}</AlertDialogTitle>
            <AlertDialogDescription className={cn('text-base font-light', descriptionClassName)}>
              {description}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter className={cn('sm:justify-center', footerClassName)}>
            <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;