import { useState } from 'react';
import Form from 'antd/es/form';
import Input from 'antd/es/input';
import Button from 'antd/es/button';
import Alert from 'antd/es/alert';
import Collapse from 'antd/es/collapse';
import Typography from 'antd/es/typography';
import message from 'antd/es/message';
import { Customer, updateMyName, changeMyPassword, changeMyEmail } from './customerApi';

const { Title, Paragraph } = Typography;

type Props = Readonly<{
  customer: Customer;
  // Re-reads the session so the rest of the account view stops showing the old
  // name and the old verification state.
  onChanged: () => void;
}>;

// Changing an email address or a password has a consequence the customer cannot
// see from the form: the new address needs verifying and the old one is told,
// and a password change signs other devices out. Both are stated above the
// fields rather than reported after the fact, so the surprise arrives while
// there is still a chance to back out.
export default function AccountDetails({ customer, onChanged }: Props) {
  const [nameError, setNameError] = useState<string | null>(null);
  const [emailError, setEmailError] = useState<string | null>(null);
  const [passwordError, setPasswordError] = useState<string | null>(null);
  const [busy, setBusy] = useState<'name' | 'email' | 'password' | null>(null);
  const [passwordForm] = Form.useForm();
  const [emailForm] = Form.useForm();

  async function saveName(values: { firstName: string; lastName: string }) {
    setBusy('name');
    setNameError(null);
    try {
      await updateMyName(values.firstName, values.lastName);
      onChanged();
      message.success('Name updated');
    } catch (err) {
      setNameError((err as Error).message);
    } finally {
      setBusy(null);
    }
  }

  async function saveEmail(values: { emailPassword: string; newEmail: string }) {
    setBusy('email');
    setEmailError(null);
    try {
      await changeMyEmail(values.emailPassword, values.newEmail);
      onChanged();
      emailForm.resetFields();
      message.success('Email changed. Check the new address for a verification link.');
    } catch (err) {
      setEmailError((err as Error).message);
    } finally {
      setBusy(null);
    }
  }

  async function savePassword(values: { currentPassword: string; newPassword: string }) {
    setBusy('password');
    setPasswordError(null);
    try {
      await changeMyPassword(values.currentPassword, values.newPassword);
      // Nothing to refresh: this session is deliberately the one kept alive.
      // Clearing the fields matters more, since they hold both passwords.
      passwordForm.resetFields();
      message.success('Password changed. Other devices have been signed out.');
    } catch (err) {
      setPasswordError((err as Error).message);
    } finally {
      setBusy(null);
    }
  }

  return (
    <div>
      <Title level={5}>Your details</Title>
      {nameError && <Alert type="error" showIcon message={nameError} style={{ marginBottom: 16 }} />}
      <Form
        layout="vertical"
        onFinish={saveName}
        initialValues={{ firstName: customer.first_name ?? '', lastName: customer.last_name ?? '' }}
      >
        <Form.Item
          name="firstName"
          label="First name"
          rules={[{ required: true, whitespace: true, message: 'First name is required' }]}
        >
          <Input autoComplete="given-name" />
        </Form.Item>
        <Form.Item
          name="lastName"
          label="Last name"
          rules={[{ required: true, whitespace: true, message: 'Last name is required' }]}
        >
          <Input autoComplete="family-name" />
        </Form.Item>
        <Form.Item style={{ marginBottom: 0 }}>
          <Button type="primary" htmlType="submit" loading={busy === 'name'}>
            Save name
          </Button>
        </Form.Item>
      </Form>

      {/* Collapsed by default. Both are rare, deliberate actions, and leaving
          them expanded would push order history and the account controls below
          the fold for everyone who never uses them. */}
      <Collapse
        style={{ marginTop: 16 }}
        items={[
          {
            key: 'email',
            label: 'Change your email address',
            children: (
              <>
                <Paragraph type="secondary">
                  Your new address needs verifying before it can be used to sign in or reset your
                  password. We will also tell {customer.email} that the address was changed.
                </Paragraph>
                {emailError && (
                  <Alert type="error" showIcon message={emailError} style={{ marginBottom: 16 }} />
                )}
                <Form layout="vertical" form={emailForm} onFinish={saveEmail}>
                  <Form.Item
                    name="newEmail"
                    label="New email address"
                    rules={[{ required: true, type: 'email', message: 'Enter a valid email address' }]}
                  >
                    <Input autoComplete="email" />
                  </Form.Item>
                  {/* Asked for because a live session alone is not enough to move
                      the address a password reset would be sent to. */}
                  <Form.Item
                    name="emailPassword"
                    label="Your password"
                    rules={[{ required: true, message: 'Your password is required' }]}
                  >
                    <Input.Password autoComplete="current-password" />
                  </Form.Item>
                  <Form.Item style={{ marginBottom: 0 }}>
                    <Button type="primary" htmlType="submit" loading={busy === 'email'}>
                      Change email
                    </Button>
                  </Form.Item>
                </Form>
              </>
            )
          },
          {
            key: 'password',
            label: 'Change your password',
            children: (
              <>
                <Paragraph type="secondary">
                  Signing in elsewhere will end. You will stay signed in on this device.
                </Paragraph>
                {passwordError && (
                  <Alert type="error" showIcon message={passwordError} style={{ marginBottom: 16 }} />
                )}
                <Form layout="vertical" form={passwordForm} onFinish={savePassword}>
                  <Form.Item
                    name="currentPassword"
                    label="Current password"
                    rules={[{ required: true, message: 'Your current password is required' }]}
                  >
                    <Input.Password autoComplete="current-password" />
                  </Form.Item>
                  <Form.Item
                    name="newPassword"
                    label="New password"
                    rules={[{ required: true, min: 8, message: 'At least 8 characters' }]}
                  >
                    <Input.Password autoComplete="new-password" />
                  </Form.Item>
                  <Form.Item
                    name="confirmPassword"
                    label="Confirm new password"
                    dependencies={['newPassword']}
                    rules={[
                      { required: true, message: 'Confirm the password' },
                      ({ getFieldValue }) => ({
                        validator: (_, value) =>
                          !value || getFieldValue('newPassword') === value
                            ? Promise.resolve()
                            : Promise.reject(new Error('The passwords do not match'))
                      })
                    ]}
                  >
                    <Input.Password autoComplete="new-password" />
                  </Form.Item>
                  <Form.Item style={{ marginBottom: 0 }}>
                    <Button type="primary" htmlType="submit" loading={busy === 'password'}>
                      Change password
                    </Button>
                  </Form.Item>
                </Form>
              </>
            )
          }
        ]}
      />
    </div>
  );
}