import React, { FC } from 'react';

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

export interface FormCompleteRegisterValues {
  token: string;
  password: string;
  passwordConfirm: string;
}

export interface FormCompleteRegisterLabels {
  password: string;
  passwordConfirm: string;
  register: string;
  showPassword: string;
  hidePassword: string;
}

export interface FormCompleteRegisterErrors {
  password?: string;
  passwordConfirm?: string;
}

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

export interface FormCompleteRegisterProps {
  values: FormCompleteRegisterValues;
  touched: FormCompleteRegisterTouched;
  errors: FormCompleteRegisterErrors;
  labels: FormCompleteRegisterLabels;
  handleChange: (e) => void;
  handleBlur: (e) => void;
  handleSubmit: (e) => void;
  isSubmitting?: boolean;
  status?: {
    msg: string;
  };
}

const FormCompleteRegister: FC<FormCompleteRegisterProps> = ({
  values,
  touched,
  errors,
  handleChange,
  handleBlur,
  handleSubmit,
  labels,
  isSubmitting,
  status,
}) => {
  return (
    <Form onSubmit={handleSubmit} novalidate>
      <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__input}>
        <InputPassword
          InputProps={{
            name: 'passwordConfirm',
            type: 'password',
            label: labels.passwordConfirm,
            required: true,
            onChange: handleChange,
            onBlur: handleBlur,
            value: values.passwordConfirm,
            error: touched.passwordConfirm && errors.passwordConfirm,
            style: 'booking',
          }}
        />
      </div>

      <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>
      )}
    </Form>
  );
};

export default FormCompleteRegister;