/*
 *
 * CheckRegPage
 *
 */

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
import styles from './styles.scss';
import StateSelect from 'components/StateSelect';
import CheckRegForm from 'containers/CheckRegForm';
import * as selectors from './selectors';
import * as actions from './actions';

export class CheckRegPage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  componentDidMount() {
    this.props.dispatch(actions.fetchStates());
    this.props.dispatch(actions.fetchInitialState());
  }

  render() {
    let formBody;
    let formResults;
    let apiErrMsg;
    if (!this.props.loading && this.props.formData) {
      if (this.props.formData.enabled) {
        formBody = (
          <CheckRegForm
            fields={this.props.formData.fields}
            onSubmit={this.props.onSubmit}
          />
        );
      } else {
        formBody = this.props.formData.disabled_message;
      }
    }

    if (this.props.results) {
      formResults = JSON.stringify(this.props.results, null, 2);
    }

    if (this.props.apiErrMsg.length > 0) {
      apiErrMsg = (
        <div className="row">
          <div className="col-xs-12 alert alert-warning">
            {this.props.apiErrMsg}
          </div>
        </div>
      );
    }

    return (
      <div className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
        <div>
          <div className={styles.header}>
            <FormattedMessage {...messages.header} />
          </div>
          <div className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
            <div className={styles.checkRegPage}>
              <StateSelect states={this.props.states} onChange={this.props.onChangeState} currentState={this.props.currentState} />
              {apiErrMsg}
              {formBody}
            </div>
            <div className={styles.message}>
              If you are not registered, then download your
              <span>
                <a target="_blank" href="http://www.eac.gov/assets/1/Documents/Federal%20Voter%20Registration_1-25-16_ENG.pdf" className={styles.link}> registration form</a>!
              </span>
            </div>
            <div id="formResults" className={styles.formResults}>{formResults}</div>
          </div>
        </div>
      </div>
    );
  }
}

CheckRegPage.propTypes = {
  formData: React.PropTypes.oneOfType([
    React.PropTypes.object,
    React.PropTypes.bool,
  ]),
  states: React.PropTypes.oneOfType([
    React.PropTypes.array,
    React.PropTypes.bool,
  ]),
  loading: React.PropTypes.bool,
  results: React.PropTypes.oneOfType([
    React.PropTypes.object,
    React.PropTypes.bool,
  ]),
  onChangeState: React.PropTypes.func,
  onSubmit: React.PropTypes.func,
  dispatch: React.PropTypes.func,
  currentState: React.PropTypes.string,
  apiErrMsg: React.PropTypes.string,
};

const mapStateToProps = createStructuredSelector({
  states: selectors.selectStates(),
  currentState: selectors.selectCurrentState(),
  formData: selectors.selectFormData(),
  loading: selectors.selectLoading(),
  results: selectors.selectResults(),
  apiErrMsg: selectors.selectApiErrMsg(),
});

function mapDispatchToProps(dispatch) {
  return {
    onChangeState: (evt) => {
      dispatch(actions.changeState(evt.target.value));
    },
    onSubmit: (evt) => {
      evt.preventDefault();
      dispatch(actions.submitForm());
    },
    dispatch,
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(CheckRegPage);

@@ -1660,99 +1660,8 @@
 iv%3E%0A
-          %3Cdiv className=%22col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12%22%3E%0A  
     
@@ -1700,26 +1700,24 @@
 ckRegPage%7D%3E%0A
-  
             
@@ -1846,18 +1846,16 @@
         
-  
 %7BapiErrM
@@ -1870,18 +1870,16 @@
         
-  
 %7BformBod
@@ -1887,35 +1887,31 @@
 %7D%0A          
- 
- 
 %3C/div%3E%0A
-  
           %3Cd
@@ -1937,26 +1937,24 @@
 s.message%7D%3E%0A
-  
             
@@ -2011,18 +2011,16 @@
         
-  
 %3Cspan%3E%0A 
@@ -2032,18 +2032,16 @@
         
- 
- 
 %3Ca targe
@@ -2203,18 +2203,16 @@
         
-  
 %3C/span%3E%0A
@@ -2217,35 +2217,31 @@
 %3E%0A          
-  
 %3C/div%3E%0A
-  
           %3Cd
@@ -2311,33 +2311,16 @@
 %7D%3C/div%3E%0A
-          %3C/div%3E%0A
         

Fix mis-rebase