import React, { FC } from 'react';

import Button from '../../blocks/Button';
import { DropdownOption } from '../../blocks/Dropdown';
import Form from '../../blocks/Form';
import Input from '../../blocks/Input';
import { RadioItem } from '../../blocks/RadioButtons';
import InputPassword from '../InputPassword';
import css from './index.module.css';

export interface FormRegisterValues {
  firstName: string;
  lastName: string;
  emailAddress: string;
  phoneNumber: unknown;
  password: string;
  partnerType: string;
  company?: string;
  countryCode: string;
  trackingCode: string;
  passwordConfirm?: string;
}

export interface FormRegisterLabels {
  firstName: string;
  lastName: string;
  emailAddress: string;
  phoneNumber: string;
  password: string;
  company?: string;
  inProgress: string;
  showPassword: string;
  hidePassword: string;
  passwordConfirm?: string;
  accountInformation: string;
  contactInformation: string;
  partnerTypes: string;
  country: string;
  register: string;
  registerInfo: string;
  completeTitle: string;
  completeFeedback: string;
  modalTitle: string;
  next: {
    title: string;
    desc: string;
    stepsTitle: string;
    steps: Array<string>;
  };
}

export interface FormRegisterErrors {
  firstName?: string;
  lastName?: string;
  emailAddress?: string;
  phoneNumber?: {
    isValid: boolean;
    number: string;
  };
  password?: string;
  passwordConfirm?: string;
  partnerType?: string;
  company?: string;
  countryCode?: string;
}

export interface FormRegisterTouched {
  [key: string]: unknown;
}

export interface FormRegisterProps {
  values: FormRegisterValues;
  touched: FormRegisterTouched;
  errors: FormRegisterErrors;
  labels: FormRegisterLabels;
  showAccountInfo: boolean;
  showButton: boolean;
  partnerTypes: RadioItem[];
  countryCodes: DropdownOption[];
  handleChange: (e) => void;
  handleBlur: (e) => void;
  handleSubmit: (e) => void;
  isSubmitting?: boolean;
  status?: {
    msg: string;
  };
  partnerType: string;
  isSuccessful: boolean;
}

const FormRegister: FC<FormRegisterProps> = ({
  values,
  touched,
  errors,
  handleChange,
  handleBlur,
  handleSubmit,
  labels,
  isSubmitting,
  status,
  showButton = true,
  isSuccessful,
}) => (
  <Form onSubmit={handleSubmit} novalidate className={css.form}>
    <h2 className={css.formRegister__title}>{labels.modalTitle}</h2>
    {!isSuccessful && (
      <>
        <p>{labels.registerInfo}</p>
        <h3>{labels.accountInformation}</h3>
      </>
    )}

    <div className={css.formRegister}>
      <div className={css.formRegister__wrapper}>
        {!isSuccessful ? (
          <>
            <div className={css.formRegister__input}>
              <Input
                name="firstName"
                type="text"
                label={labels.firstName}
                required
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.firstName}
                error={touched.firstName && errors.firstName}
                style={'booking'}
              />
            </div>
            <div className={css.formRegister__input}>
              <Input
                name="lastName"
                autocomplete="family-name"
                type="text"
                label={labels.lastName}
                required
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.lastName}
                error={touched.lastName && errors.lastName}
                style={'booking'}
              />
            </div>
            <div className={css.formRegister__input}>
              <Input
                name="emailAddress"
                type="email"
                label={labels.emailAddress}
                required
                style={'booking'}
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.emailAddress}
                error={touched.emailAddress && errors.emailAddress}
              />
            </div>
            <div className={css.formRegister__input}>
              <InputPassword
                InputProps={{
                  name: 'password',
                  type: 'password',
                  label: labels.password,
                  required: true,
                  onChange: handleChange,
                  onBlur: handleBlur,
                  value: values.password,
                  error: touched.password && errors.password,
                  style: 'booking',
                }}
              />
            </div>
            {showButton && (
              <div className={css.formRegister__submit}>
                <Button
                  type="submit"
                  disabled={isSubmitting}
                  showThrobber={isSubmitting}
                >
                  {labels.register}
                </Button>
              </div>
            )}
            {status && status.msg && (
              <div className={css.formRegister__messages}>{status.msg}</div>
            )}
          </>
        ) : (
          <>
            <h3>&#10004; {labels.completeTitle}</h3>
            <p>{labels.completeFeedback}</p>
          </>
        )}
      </div>
      <div className={css.formRegister__nextSteps}>
        <h3>{labels.next.title}</h3>
        <p>{labels.next.desc}</p>
        <p>{labels.next.stepsTitle}</p>

        <ul>
          {labels.next.steps.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </ul>
      </div>
    </div>

    <Input
      data-test-id={'tracking-code'}
      name="trackingCode"
      type="hidden"
      value={values.trackingCode}
      readOnly={true}
    />
  </Form>
);

export default FormRegister;