import React, { FC } from 'react';

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

export interface FormLoginValues {
  emailAddress: string;
  password: string;
}

export interface FormLoginLabels {
  emailAddress: string;
  password: string;
  showPassword: string;
  hidePassword: string;
  login: string;
  forgotPassword: string;
}

export interface FormLoginErrors {
  emailAddress?: string;
  password?: string;
}

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

export interface FormLoginProps {
  values: FormLoginValues;
  touched: FormLoginTouched;
  errors: FormLoginErrors;
  labels: FormLoginLabels;
  handleChange: (e) => void;
  handleBlur: (e) => void;
  handleSubmit: (e) => void;
  isSubmitting?: boolean;
  status?: {
    msg: string;
  };
  handleForgotPassword: () => void;
}

const FormLogin: FC<FormLoginProps> = ({
  values,
  touched,
  errors,
  handleChange,
  handleBlur,
  handleSubmit,
  labels,
  isSubmitting,
  status,
  handleForgotPassword,
}) => {
  return (
    <Form onSubmit={handleSubmit} novalidate>
      <div className={css.formRegister__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.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>

      <div
        className={css.formRegister__forgotPwd}
        onClick={handleForgotPassword}
      >
        {labels.forgotPassword}
      </div>

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

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

export default FormLogin;