import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Formsy from 'formsy-react';
import FRC from 'formsy-react-components';

import { Modal } from '../../components/Modal';
import { roles } from '../../Data';
import {
  saveNewUser,
  enableSubmitForm,
  disableSubmitForm,
  toggleAddUserModal,
} from '../../actions';

const { Input, Select } = FRC;

class AddUserView extends Component {
  constructor(props) {
    super(props);

    this.submitForm = this.submitForm.bind(this);
  }

  submitForm() {
    const myform = this.myform.getModel();
    const user = {
      first_name: myform.firstName,
      last_name: myform.lastName,
      mobile_no: myform.mobileno,
      email: myform.email,
      groups: myform.role,
    };

    this.props.save(user);
  }

  render() {
    const { isOpen, canSubmit } = this.props;

    return (
      <Modal
        title="Create User"
        contentLabel="Create User"
        isOpen={isOpen}
        onCloseModal={this.props.closeConfirmModal}
        canSubmit={canSubmit}
        submitForm={this.submitForm}
      >
        <Formsy.Form
          onValidSubmit={this.submitForm}
          onValid={this.props.enableSubmitForm}
          onInvalid={this.props.disableSubmitForm}
          ref={(ref) => {
            this.myform = ref;
          }}
        >
          <Input
            name="firstName"
            id="firstName"
            value=""
            label="First Name"
            type="text"
            required
            validations="minLength:1"
          />
          <Input
            name="lastName"
            id="lastName"
            value=""
            label="Last Name"
            type="text"
            validations="minLength:1"
            required
          />
          <Input
            name="mobileno"
            id="mobileno"
            value=""
            label="Mobile No."
            type="number"
            validations="minLength:1"
            required
          />
          <Input
            name="email"
            id="email"
            value=""
            label="Email"
            type="email"
            validations="minLength:1"
            required
          />
          <Select multiple name="role" label="Role" options={roles} value={['tada_deo']} required />
        </Formsy.Form>
      </Modal>
    );
  }
}

AddUserView.propTypes = {
  canSubmit: PropTypes.bool,
  isOpen: PropTypes.bool,
  enableSubmitForm: PropTypes.func,
  disableSubmitForm: PropTypes.func,
  closeConfirmModal: PropTypes.func,
  save: PropTypes.func,
};

const mapStateToProps = (state) => {
  return {
    isOpen: state.modal.createUser,
    canSubmit: state.appstate.enableSubmitForm,
  };
};

const AddUser = connect(mapStateToProps, {
  save: saveNewUser,
  enableSubmitForm,
  disableSubmitForm,
  closeConfirmModal: toggleAddUserModal,
})(AddUserView);

export { AddUser };

@@ -762,16 +762,49 @@
 .email,%0A
+      password: myform.password,%0A
       gr
@@ -2265,32 +2265,253 @@
 ed%0A          /%3E%0A
+          %3CInput%0A            name=%22password%22%0A            id=%22password%22%0A            value=%22%22%0A            label=%22Password%22%0A            type=%22password%22%0A            required%0A            validations=%22minLength:5%22%0A          /%3E%0A
           %3CSelec

add password field in the add user form