import React, { FC } from 'react';

import Button from '../../blocks/Button';
import Form from '../../blocks/Form';
import Input from '../../blocks/Input';
import css from './index.module.css';

export interface FormPasswordResetValues {
  emailAddress: string;
}

export interface FormPasswordResetLabels {
  emailAddress: string;
  resetPassword: string;
  alreadyRegistered: string;
}

export interface FormPasswordResetErrors {
  emailAddress?: string;
}

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

export interface FormPasswordResetProps {
  values: FormPasswordResetValues;
  touched: FormPasswordResetTouched;
  errors: FormPasswordResetErrors;
  labels: FormPasswordResetLabels;
  handleChange: (e) => void;
  handleBlur: (e) => void;
  handleSubmit: (e) => void;
  isSubmitting?: boolean;
  status?: {
    msg: string;
  };
  handleAlreadyRegistered: () => void;
}

const FormPasswordReset: FC<FormPasswordResetProps> = ({
  values,
  touched,
  errors,
  handleChange,
  handleBlur,
  handleSubmit,
  labels,
  isSubmitting,
  status,
  handleAlreadyRegistered,
}) => {
  return (
    <Form onSubmit={handleSubmit} novalidate>
      <div className={css.formPasswordReset__input}>
        <Input
          style={'booking'}
          name="emailAddress"
          type="email"
          label={labels.emailAddress}
          required
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.emailAddress}
          error={touched.emailAddress && errors.emailAddress}
        />
      </div>

      <div
        className={css.formPasswordReset__alreadyRegistered}
        onClick={handleAlreadyRegistered}
      >
        {labels.alreadyRegistered}
      </div>

      <div className={css.formPasswordReset__submit}>
        <Button
          type="submit"
          disabled={isSubmitting}
          showThrobber={isSubmitting}
        >
          {labels.resetPassword}
        </Button>
      </div>

      {status && status.msg && (
        <div className={css.formPasswordReset__messages}>{status.msg}</div>
      )}
    </Form>
  );
};

export default FormPasswordReset;