import { useState } from 'react';
import Form from 'antd/es/form';
import Input from 'antd/es/input';
import Button from 'antd/es/button';
import Typography from 'antd/es/typography';
import Modal from 'antd/es/modal';
import Alert from 'antd/es/alert';
import { requestPasswordReset } from './customerApi';

const { Paragraph, Text } = Typography;

interface Props {
  onClose: () => void;
  // Steps back to sign-in without leaving a history entry behind, the same way
  // the auth modal switches between its own tabs.
  onBackToSignIn: () => void;
}

export default function ForgotPassword({ onClose, onBackToSignIn }: Props) {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function onFinish(values: { email: string }) {
    setLoading(true);
    setError(null);
    try {
      await requestPasswordReset(values.email);
      setSent(true);
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <Modal
      title="Reset your password"
      open
      onCancel={onClose}
      footer={null}
      style={{ maxWidth: 'calc(100vw - 32px)' }}
      destroyOnHidden
    >

      {sent ? (
        <>
          {/* Worded so it reveals nothing about whether the address has an
              account — the server deliberately answers the same either way. */}
          <Alert
            type="success"
            showIcon
            message="Check your email"
            description="If an account exists for that address, we've sent a link to reset the password. The link expires in one hour."
          />
          <Paragraph style={{ marginTop: 16 }}>
            <Button type="link" style={{ paddingInline: 0 }} onClick={onBackToSignIn}>
              Back to sign in
            </Button>
          </Paragraph>
        </>
      ) : (
        <>
          <Paragraph type="secondary">
            Enter the email address for your account and we'll send you a link to choose a new password.
          </Paragraph>
          {error && <Alert type="error" showIcon message={error} style={{ marginBottom: 16 }} />}
          <Form layout="vertical" onFinish={onFinish}>
            <Form.Item
              name="email"
              label="Email"
              rules={[{ required: true, type: 'email', message: 'Enter a valid email address' }]}
            >
              <Input autoComplete="email" />
            </Form.Item>
            <Form.Item>
              <Button block type="primary" htmlType="submit" loading={loading}>
                Send reset link
              </Button>
            </Form.Item>
          </Form>
          <Text type="secondary">
            Remembered it?{' '}
            <Button type="link" style={{ paddingInline: 0 }} onClick={onBackToSignIn}>
              Sign in
            </Button>
          </Text>
        </>
      )}
    </Modal>
  );
}