import React, { Component } from 'react';
import axios from 'axios';
import _ from 'lodash';
import PropTypes from 'prop-types';
import * as CookieHelpers from 'shared/utils/cookieHelper';
import Form from 'shared/components/form/form';
import FormEmail from 'shared/components/form/formEmail/formEmail';
import FormZipCode from 'shared/components/form/formZipCode/formZipCode';
import FormPassword from 'shared/components/form/formPassword/formPassword';
import FormButton from 'shared/components/form/formButton/formButton';
import FormInput from 'shared/components/form/formInput/formInput';
import Section from 'shared/components/section/section';
import config from 'config/environment';
import styles from './signup.css';


class SignUp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      emailValid: false,
      error: false,
      isValid: true,
      isLoading: false,
      mentor: false,
      password: '',
      passwordConfirm: '',
      passwordValid: false,
      success: false,
      zip: '',
      zipValid: false
    };
  }

  onFirstNameChange = (value) => {
    this.setState({ firstName: value });
  }

  onLastNameChange = (value) => {
    this.setState({ lastName: value });
  }

  onIdentifierStatusChange = (value) => {
    this.setState({ identifier: value });
  }

  onEmailChange = (value, valid) => {
    this.setState({ email: value.toLowerCase(), emailValid: valid });
  }

  onZipChange = (value, valid) => {
    this.setState({ zip: value, zipValid: valid });
  }

  onPasswordChange = (value, valid) => {
    this.setState({ password: value, passwordValid: valid });
  }

  onConfirmPasswordChange = (value, valid) => {
    this.setState({ passwordConfirm: value, passwordConfirmValid: valid });
  }

  validatePasswordConfirm = value =>
    value === this.state.password;

  handleOnClick = (e) => {
    e.preventDefault();

    this.setState({ isLoading: true });

    if (this.isFormValid()) {
      const {
        email, zip, password, firstName, lastName, identifier
      } = this.state;
      axios.post(`${config.backendUrl}/users`, {
        user: {
          first_name: firstName,
          last_name: lastName,
          email,
          zip,
          password,
          identifier
        }
      }).then(({ data }) => {
        window.location = '/signup-info';
        CookieHelpers.setUserAuthCookie(data);
        this.setState({ isLoading: false });
      }).catch((error) => {
        const data = _.get(error, 'response.data');
        let errorMessage = '';
        if (data) {
          Object.keys(data).forEach((key) => {
            if (data && data.hasOwnProperty(key)) { // eslint-disable-line
              errorMessage += ` ${key}: ${data[key][0]} `;
            }
          });
        }
        this.props.sendNotification('error', 'Error', 'Please try registering again. Contact one of our staff if this problem persists.');
        this.setState({ error: errorMessage, isLoading: false });
      });
    } else {
      this.setState({ error: 'Missing required field(s)', isLoading: false });
      this.emailRef.inputRef.revalidate();
      this.firstNameRef.revalidate();
      this.lastNameRef.revalidate();
      this.zipRef.inputRef.revalidate();
      this.passwordRef.inputRef.revalidate();
      this.passwordConfirmRef.inputRef.revalidate();
    }
  }

  isFormValid = () =>
    this.state.emailValid
    && this.state.zipValid
    && this.state.passwordValid
    && this.state.passwordConfirmValid;

  render() {
    return (
      <Section className={styles.signup} title="Join Operation Code">
        <Form className={styles.signupForm}>
          <span>
            Are you ready to deploy your future?  Join Operation Code
            today and launch your career in tech.
            Once you complete the form below you&#8217;ll be invited
            to join our team on Slack.  Make sure you stop in and say hi!
          </span>
          <FormEmail
            id="email" placeholder="Email (Required)"
            onChange={this.onEmailChange}
            ref={(child) => { this.emailRef = child; }}
          />
          <FormInput
            id="firstName"
            placeholder="First Name (Required)"
            onChange={this.onFirstNameChange}
            ref={(child) => { this.firstNameRef = child; }}
          />
          <FormInput
            id="lastName"
            placeholder="Last Name (Required)"
            onChange={this.onLastNameChange}
            ref={(child) => { this.lastNameRef = child; }}
          />
          <FormZipCode
            id="zip"
            placeholder="Zip Code (Required)"
            onChange={this.onZipChange}
            ref={(child) => { this.zipRef = child; }}
          />
          <FormPassword
            id="password"
            placeholder="Password (Required)"
            onChange={this.onPasswordChange}
            validationRegex={/^(?=.*[A-Z]).{6,}$/}
            validationErrorMessage="Must be 6 characters long and include a capitalized letter"
            ref={(child) => { this.passwordRef = child; }}
          />
          <FormPassword
            id="passwordConfirm"
            placeholder="Confirm Password (Required)"
            onChange={this.onConfirmPasswordChange}
            validateFunc={this.validatePasswordConfirm}
            validationErrorMessage="Passwords must match"
            ref={(child) => { this.passwordConfirmRef = child; }}
          />
          {this.state.error &&
          <ul className={styles.errorList}>There was an error joining Operation Code:
            <li className={styles.errorMessage}>{this.state.error}</li>
          </ul>}
          {this.state.isLoading ? <FormButton className={styles.joinButton} text="Loading..." disabled theme="grey" /> : <FormButton className={styles.joinButton} text="Join" onClick={this.handleOnClick} theme="red" />}
        </Form>
      </Section>
    );
  }
}

SignUp.propTypes = {
  sendNotification: PropTypes.func.isRequired
};

export default SignUp;

@@ -3737,46 +3737,215 @@
 re? 
- Join Operation Code%0A            today
+Our community supports veterans%0A            transitioning into the tech industry, but we welcome family members,%0A            tech professionals, volunteers and sponsors. Join Operation Code today%0A           
  and
@@ -3972,28 +3972,16 @@
 in tech.
-%0A           
  Once yo
@@ -4005,16 +4005,29 @@
 rm below
+,%0A           
  you&#82
@@ -4042,28 +4042,16 @@
  invited
-%0A           
  to join
@@ -4069,17 +4069,16 @@
 n Slack.
- 
  Make su
@@ -4088,16 +4088,28 @@
 you stop
+%0A           
  in and 

Update /join content to make it clear that not only veterans may sign up. #811