import React from 'react';
import { Field } from 'react-final-form';
import classNames from 'classnames/bind';

import { required, email, composeValidators, checkbox } from 'store/utils/validation';

import content from 'config/content';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import styleIdentifiers from './signupForm.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type SignupFormProps = StateProps & DispatchProps & OwnProps;

const SignupForm = (props: SignupFormProps) => {
  const { handleSubmit, submitting, valid } = props;
  return (
    <form className={styles('SignupForm')} onSubmit={handleSubmit}>
      <Field
        component={ProjectInput}
        name="email"
        inputType="email"
        label="forms.signUp.email.email"
        placeholder="forms.signUp.email.placeholder"
        validate={composeValidators(required, email)}
        requiredClassName={styles('required')}
      />

      <Field
        component={ProjectInput}
        seed="password"
        name="password"
        label="forms.signUp.password.password"
        placeholder="forms.signUp.password.placeholder"
        validate={required}
        requiredClassName={styles('required')}
      />
      <Field
        component={ProjectInput}
        seed="password"
        name="passwordConfirmation"
        label="forms.signUp.confirmPassword.confirmPassword"
        placeholder="forms.signUp.confirmPassword.placeholder"
        validate={required}
        requiredClassName={styles('required')}
      />
      <Field
        component={ProjectInput}
        seed="checkbox"
        name="terms"
        type="checkbox"
        label="forms.signUp.gdpr"
        validate={checkbox}
        requiredClassName={styles('required')}
      />
      <ProjectButton
        customClassName={styles('button-green')}
        disabled={submitting || !valid}
        rounded
        label="forms.signUp.signUp"
        type="submit"
      />
    </form>
  );
};

export default SignupForm;
