import { useState } from 'react';
import Modal from 'antd/es/modal';
import { useNavigate, useLocation } from 'react-router-dom';
import AuthForm, { AuthMode } from './AuthForm';

type Props = Readonly<{
  open: boolean;
  onClose: () => void;
  onSuccess: () => void;
}>;

// The prompt shown when a signed-out visitor does something that needs an
// account — adding to the cart, favoriting, or filtering by favorites. It is
// only the framing: the form itself is shared with the /login and /register
// routes, so the two cannot drift apart in validation, copy, or consent
// wording again.
export default function AuthPromptModal({ open, onClose, onSuccess }: Props) {
  const [mode, setMode] = useState<AuthMode>('register');
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <Modal
      title="Create an account to continue"
      open={open}
      onCancel={onClose}
      footer={null}
      destroyOnHidden
    >
      <AuthForm
        mode={mode}
        onModeChange={setMode}
        // Recovery is a route rather than another tab, so leave this prompt and
        // open it over whatever is behind — the interrupted action is abandoned
        // either way, and stacking a second modal on this one would be worse.
        onForgotPassword={() => {
          onClose();
          navigate('/forgot-password', { state: { background: location } });
        }}
        onSuccess={onSuccess}
      />
    </Modal>
  );
}