import React, { PropTypes } from 'react';
import Helmet from 'react-helmet';
import { Link } from 'react-router';
import { reduxForm, Field, Fields,formValueSelector, isDirty, getFormInitialValues,getFormValues} from 'redux-form/immutable';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { PureRender, onMount } from 'utils/component-helpers';
import { selectUser } from 'entities/user/selectors';
import FormTextField from 'components/FormTextField';
import SplashWrapper from 'components/SplashWrapper';

import Button from 'material-ui/Button';
import Dialog, { DialogTitle, DialogContent, DialogContentText, DialogActions } from 'material-ui/Dialog';
import * as Validators from 'utils/validators';
import * as Actions from './actions';
import { selectSubmitDone, selectErrorCode } from './selectors';
import { selectLoginRejected } from './selectors';



const RenderFields = ({ loginRejected, evalue, dirty, ... fields }) => (

  <div>

  <Field
    name="email"
    type="email"
    label="Email"
    component={FormTextField}

    fullWidth
    autoFocus

    style={{ marginBottom: 20 }}


    validate={[Validators.required, Validators.isEmail]}

  />

  <br/>
  <Field
      name= "password"
      type= "password"
      label= "Password"
      fullWidth
      component={FormTextField}

     autoFocus
    //   onChange={(e) => {e.target.email.valid=true,e.target.email.required=true}}



      style={{ marginBottom: 50 }}
      validate={[Validators.required]}

  />


    <Button
      type="submit"
      color="primary"
      raised

     disabled={!(fields.email.meta.valid&&fields.password.meta.valid)&&fields.email.meta.visited}

      style={{ width: '100%' }}
    >Login</Button>
    <div style={{ display: 'flex', justifyContent: 'center', marginTop: 20 }}>
      <p>Don&apos;t have an account? <Link to={'/register'}>Register here!</Link></p>
    </div>
  </div>


);

RenderFields.propTypes = {

  loginRejected: PropTypes.bool,
  evalue: PropTypes.string,
  dirty: PropTypes.bool

};



const LoginPage = (props) => {

  const {
    params,
    actions,
    loginRejected,
    evalue,
    dirty

  } = props;




   const onLoginFormSubmit = (evt) => {
    if (evt !== undefined && evt.preventDefault) evt.preventDefault();

    actions.loginAction(evt.target.email.value, evt.target.password.value);
    debugger;


  }



  console.log(evalue);



    return (

    <SplashWrapper>
      <Helmet title="Login" />
      <h1 style={{ fontSize: 25, fontWeight: 600, marginBottom: 20 }}>Organizer Portal</h1>

      <form onSubmit={onLoginFormSubmit}>



        <Fields
          names={[
            'email',
            'password'

          ]}

          component={RenderFields}
          loginRejected={loginRejected}


                    />



         <Dialog
          open={loginRejected}
          onRequestClose={actions.loginAction}
           >
          <DialogTitle>Failed to Log In!</DialogTitle>

          <DialogContent>
            <DialogContentText>Either the information you entered was incorrect, or your user is still pending review by DEED staff.</DialogContentText>
          </DialogContent>
          <DialogActions>
            <Link to={`/login${location.search}`}>
            <Button color="primary" raised onTouchTap={actions.resetLoginAction}>Close</Button></Link>
          </DialogActions>


        </Dialog>

      </form>

    </SplashWrapper>

  );

};

LoginPage.propTypes = {
  params: PropTypes.object,
  actions: PropTypes.object,
  loginRejected: PropTypes.bool,
  location: PropTypes.object,
  evalue: PropTypes.string,
  dirty: PropTypes.bool


};
const selector = formValueSelector('/login')

export default connect(



  (state) => ({
    loginRejected: selectLoginRejected(state),
         evalue : selector(state, 'email'),
         dirty: isDirty('/login')(state),




  }),
  (dispatch) => ({
    actions: bindActionCreators(Actions, dispatch)
  })
)(reduxForm({
  form: '/login',
  destroyOnUnmount: false,
  enableReinitialize: true,
  keepDirtyOnReinitialize: true
})(PureRender(onMount((props) => props.actions.resetLoginAction())(LoginPage))));