import EmailAuthForm from '@/app/auth/email/auth-form';
import CloseSvg from '@/components/CustomIcon/icons/close.svg';
import { Dialog, DialogContent, DialogTitle } from '@workspace/ui/components/dialog';
import Image from 'next/image';
import { forwardRef, useImperativeHandle, useState } from 'react';

export interface EmailAuthDialogRef {
  show: () => void;
  hide: () => void;
}

const EmailAuthDialog = forwardRef<EmailAuthDialogRef>((props, ref) => {
  const [open, setOpen] = useState(false);

  useImperativeHandle(ref, () => ({
    show: () => setOpen(true),
    hide: () => setOpen(false),
  }));

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent
        className={
          'rounded-0 h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
        }
        closeIcon={<Image src={CloseSvg} alt={'close'} />}
        closeClassName={
          'right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
        }
      >
        <DialogTitle className={'sr-only'}>title</DialogTitle>
        <div className={'min-h-[524px]'}>
          <EmailAuthForm />
        </div>
      </DialogContent>
    </Dialog>
  );
});

export default EmailAuthDialog;