/* eslint-disable no-underscore-dangle */

import { Button, Col, Row, Grid, Form, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';

import getCSRF from '../../../../shared/util/getcsrf';
import Utility from '../../../../shared/util/Utility';
import * as Security from '../../../../shared/reducers/Security';

export const Reducers = [Security];

export class loginScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
      _csrf: getCSRF(),
      submitLogin: true,
      canSubmit: false
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentWillMount() {
    if (this.props.loggedIn) {
      this.props.setPageByName('/');
    } else {
      this.props.clearAuthResponse();
    }
  }

  setLoginSubmitMode(submitLogin) {
    this.setState({
      submitLogin
    });
  }

  getValidationState() {
    // success, warning, error, or null
    if (this.haveFailedAuth()) {
      return 'error';
    } else if (this.haveSucceededAuth()) {
      return 'success';
    }

    return null;
  }

  handleInputChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  handleSubmit(formData) {
    formData.preventDefault();

    if (this.state.submitLogin) {
      this.props.requestUserLogin(formData, this.props.redirectUrl || '/');
    } else {
      this.props.requestUserRegister(formData, this.props.redirectUrl || '/');
    }
  }

  haveSucceededAuth() {
    return (
      !this.props.loginInProgress &&
      !this.props.registerInProgress &&
      this.props.authSuccess &&
      this.props.authResponse !== ''
    );
  }
  haveFailedAuth() {
    return (
      !this.props.loginInProgress &&
      !this.props.registerInProgress &&
      !this.props.authSuccess &&
      this.props.authResponse !== ''
    );
  }
  render() {
    return (
      <Grid>
        <Row>
          <Col
            mdOffset={0}
            md={4}
          >
            <div>
              <h4>Registrera dig snabbt och enkelt här</h4>
              <p>
                Vi sparar inga personuppgifter så var noga med att komma ihåg ditt lösenord då vi inte kan återställa
                det åt dig.
              </p>
              <p>
                Materialet är anpassat efter det svenska språket och du kan lära dig från svenska till japanska och
                japanska till svenska
              </p>
            </div>
          </Col>
          <Col
            mdOffset={1}
            md={4}
          >
            <Form onSubmit={this.handleSubmit}>
              <fieldset>
                <FormGroup
                  controlId="formBasicText"
                  validationState={this.getValidationState()}
                >
                  <legend>Logga in eller registrera dig</legend>
                  {this.props.authResponse && this.getValidationState() ? (
                    <ControlLabel name="authFeedback">{this.props.authResponse}</ControlLabel>
                  ) : null}
                </FormGroup>
                <FormGroup>
                  <FormControl
                    type="text"
                    name="username"
                    placeholder="Användarnamn"
                    value={this.state.username}
                    onChange={this.handleInputChange}
                  />
                  <FormControl.Feedback />
                </FormGroup>
                <FormGroup>
                  <FormControl
                    type="password"
                    name="password"
                    placeholder="Lösenord"
                    value={this.state.password}
                    onChange={this.handleInputChange}
                  />
                </FormGroup>
                <FormControl
                  type="hidden"
                  name="_csrf"
                  value={this.state._csrf}
                />

                <FormGroup>
                  <Button
                    label="login"
                    onClick={() => this.setLoginSubmitMode(true)}
                    bsStyle="primary"
                    name="login"
                    type="submit"
                    disabled={!this.state.username || !this.state.password}
                  >
                    Logga in
                  </Button>{' '}
                  <Button
                    label="login"
                    onClick={() => this.setLoginSubmitMode(false)}
                    bsStyle="success"
                    name="register"
                    type="submit"
                    disabled={!this.state.username || !this.state.password}
                  >
                    Registrera
                  </Button>{' '}
                  <div>
                    <input
                      label="remember-me"
                      name="remember-me"
                      type="checkbox"
                      onChange={this.handleInputChange}
                      disabled={!this.state.username || !this.state.password}
                      defaultChecked={false}
                    />{' '}
                    Kom ihåg mig
                  </div>
                </FormGroup>
              </fieldset>
            </Form>
          </Col>
        </Row>
      </Grid>
    );
  }
}

loginScreen.defaultProps = Utility.reduxEnabledDefaultProps({}, Reducers);

loginScreen.propTypes = Utility.reduxEnabledPropTypes({}, Reducers);

export default Utility.superConnect(this, Reducers)(loginScreen);

@@ -44,16 +44,26 @@
 import %7B
+ Checkbox,
  Button,
@@ -148,16 +148,16 @@
 strap';%0A
-
 %0Aimport 
@@ -324,16 +324,83 @@
 curity';
+%0Aimport getRememberMe from '../../../../shared/util/getRememberMe';
 %0A%0Aexport
@@ -542,16 +542,46 @@
 ate = %7B%0A
+      checkboxChecked: false,%0A
       us
@@ -692,16 +692,70 @@
     %7D;%0A%0A
+    this.handleChange = this.handleChange.bind(this);%0A
     this
@@ -1305,16 +1305,16 @@
 %0A    %7D%0A%0A
-
     retu
@@ -1323,24 +1323,107 @@
  null;%0A  %7D%0A%0A
+  handleChange(e) %7B%0A    this.setState(%7B checkboxChecked: e.target.checked %7D);%0A  %7D%0A%0A
   handleInpu
@@ -4203,17 +4203,16 @@
      /%3E%0A
-%0A
         
@@ -5038,42 +5038,17 @@
    %3C
-div%3E%0A                    %3Cinput%0A  
+Checkbox%0A
     
@@ -5095,34 +5095,32 @@
                 
-  
 name=%22remember-m
@@ -5146,28 +5146,45 @@
     
-  type=%22checkbox%22%0A  
+checked=%7Bthis.state.checkboxChecked%7D%0A
     
@@ -5212,37 +5212,32 @@
 nge=%7Bthis.handle
-Input
 Change%7D%0A        
@@ -5250,140 +5250,9 @@
     
-    
-disabled=%7B!this.state.username %7C%7C !this.state.password%7D%0A                      defaultChecked=%7Bfalse%7D%0A                    /%3E%7B' '%7D
+%3E
 %0A   
@@ -5293,36 +5293,46 @@
               %3C/
-div%3E
+Checkbox%3E%7B' '%7D
 %0A               

add mock checkbox for remember-me cookie