// @Flow

import React from 'react';
import { Field, reduxForm } from 'redux-form';

import { Fieldset, Form, Button, FormGroup, FormHelper, TextBox } from 'conferize-frontend';

const validateInput = (values, props) => {
  const SignUpFormHelper = props.SignUpFormHelper;
  const fieldsMetaInfo = SignUpFormHelper.fieldsMetaInfo;

  const errors = SignUpFormHelper.triggerActiveServerErrors(values, props.touch);
  if (!SignUpFormHelper.getFieldValue(values, fieldsMetaInfo.firstName)) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.firstName, 'Please add a name');
  }

  if (!SignUpFormHelper.getFieldValue(values, fieldsMetaInfo.lastName)) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.lastName, 'Please add a last name');
  }

  const userNameValue = SignUpFormHelper.getFieldValue(values, fieldsMetaInfo.userName);
  if (!userNameValue) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.userName, 'Please add a username');
  } else if (userNameValue.length < 3) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.userName, 'Username too small. Try a longer username');
  } else if (userNameValue.length > 15) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.userName, 'Username can not have more than 15 characters');
  }

  const emailValue = SignUpFormHelper.getFieldValue(values, fieldsMetaInfo.email);
  if (!emailValue) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.email, 'Please add an email');
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(emailValue)) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.email, 'Invalid email address');
  }

  const passwordValue = SignUpFormHelper.getFieldValue(values, fieldsMetaInfo.password);
  if (!passwordValue) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.password, 'Please add a password');
  } else if (passwordValue.length < 6) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.password, 'Password must have at least 6 characters');
  }

  const confirmPasswordValue = SignUpFormHelper.getFieldValue(values, fieldsMetaInfo.password);
  if (!confirmPasswordValue) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.confirmPassword, 'Please confirm the password');
  } else if (passwordValue !== confirmPasswordValue) {
    SignUpFormHelper.setFieldValue(errors, fieldsMetaInfo.confirmPassword, 'The password must coincide');
  }
  return errors;
};

/* SignUpForm ReduxForm */

type SignUpReduxFormProps = {

  /** FormHelper. */
  SignUpFormHelper: FormHelper,

  /** Will be true if there is any asynch operation going on. */
  submitting: boolean,

  /** Will be true if there is at least one input with errors. */
  invalid: boolean,

  /** Will be true if the form data is the same as its initialized values. Opposite of dirty. */
  pristine: boolean,

  /** Action specifies where to send the form-data when a form is submitted. */
  action: string,

  /** Method specifies how to send form-data. */
  method: string,
};

/**
 * SignUpReduxForm component to be connected to redux-form.
 */

 // Use named export for unconnected redux component (for tests)
export const SignUpReduxForm = ({
  SignUpFormHelper,
  submitting,
  invalid,
  pristine,
  action,
  method }: SignUpReduxFormProps,
) => (
  <Form action={action} method={method}>
    <Fieldset>
      <FormGroup>
        <Field name={SignUpFormHelper.formFieldNames.firstName} component={TextBox} placeholder="First name" required htmlFor="firstName" />
      </FormGroup>
      <FormGroup>
        <Field name={SignUpFormHelper.formFieldNames.lastName} component={TextBox} placeholder="Last name" required htmlFor="lastName" />
      </FormGroup>
      <FormGroup>
        <Field name={SignUpFormHelper.formFieldNames.userName} component={TextBox} placeholder="Username" required htmlFor="userName" />
      </FormGroup>
      <FormGroup>
        <Field name={SignUpFormHelper.formFieldNames.email} component={TextBox} placeholder="Email" required htmlFor="email" />
      </FormGroup>
      <FormGroup>
        <Field name={SignUpFormHelper.formFieldNames.password} component={TextBox} placeholder="Password" required type="password" htmlFor="password" />
      </FormGroup>
      <FormGroup>
        <Field name={SignUpFormHelper.formFieldNames.confirmPassword} component={TextBox} placeholder="Repeat Password" required type="password" htmlFor="confirmPassword" />
      </FormGroup>
    </Fieldset>
    <br />
    <div className="row">
      <div className="col-xs-12 end-xs">
        <Button variant="primary" disabled={invalid || pristine || submitting}>Sign In</Button>
      </div>
    </div>
  </Form>
);

/* Decorate the form component */
const SignUpReduxFormConnected = reduxForm({
  form: 'SignUpForm', // a unique name for this form
  validate: validateInput,
})(SignUpReduxForm);

/* SignUpForm */

type Props = {
  /** This is the description of prop1 */
  fields: {
    [fieldName:
      'user[first_name]' |
      'user[last_name]' |
      'user[user_name]' |
      'user[email]' |
      'user[password]' |
      'user[confirm_password]'
    ]: {
      value: string,
      errors: Array<string>
    }
  },

  /** Action specifies where to send the form-data when a form is submitted. */
  action: string,

  /** Method specifies how to send form-data. */
  method: string,
};

/**
 * SignUpForm component.
 */
const SignUpForm = ({ fields, action, method }: Props) => {
  const formFieldNames = {
    firstName: 'user[first_name]',
    lastName: 'user[last_name]',
    userName: 'user[user_name]',
    email: 'user[email]',
    password: 'user[password]',
    confirmPassword: 'user[confirm_password]',
  };

  const SignUpFormHelper = new FormHelper(fields, formFieldNames);

  return (
    <SignUpReduxFormConnected
      initialValues={SignUpFormHelper.initialValues}
      SignUpFormHelper={SignUpFormHelper}
      action={action}
      method={method}
    />
  );
};

export default SignUpForm;