import Modal from 'antd/es/modal';
import AuthForm, { AuthMode } from './AuthForm';

type Props = Readonly<{
  mode: AuthMode;
  onClose: () => void;
  // Moving between the auth routes, supplied by the router so the rule about
  // keeping the whole detour to one history entry lives in one place.
  onNavigate: (path: string) => void;
}>;

const TITLES: Record<AuthMode, string> = {
  register: 'Create an account',
  login: 'Log in'
};

// /login and /register as modals over the page behind them, so a customer who
// clicks Log in while browsing and changes their mind is not stranded. Both
// stay real routes: /reset-password links to /login, and customers may have
// bookmarks.
export default function AuthRouteModal({ mode, onClose, onNavigate }: Props) {
  return (
    <Modal
      title={TITLES[mode]}
      open
      onCancel={onClose}
      footer={null}
      style={{ maxWidth: 'calc(100vw - 32px)' }}
      destroyOnHidden
    >
      <AuthForm
        mode={mode}
        onModeChange={(next) => onNavigate(next === 'login' ? '/login' : '/register')}
        onForgotPassword={() => onNavigate('/forgot-password')}
        // Closing returns to the page behind, now signed in. Someone who signs
        // in while browsing wants to carry on browsing rather than be moved to
        // their account page.
        onSuccess={onClose}
      />
    </Modal>
  );
}