// CreateUserForm Component
import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { noop } from 'node-noop';
import { FormSection } from 'redux-form';

// Material Components
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';

// Components
import Alert from '../Alert/Alert';
import PersonalDetailsFormFields from './CreateUserForm/PersonalDetailsFormFields';
import AddressFormFields from './CreateUserForm/AddressFormFields';
import ClinicianDetailsFormFields from './CreateUserForm/ClinicianDetailsFormFields';

const styles = theme => ({
  title: {
    marginTop: theme.spacing.unit * 9,
    marginBottom: theme.spacing.unit * 6
  },
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  }
});

const injectRoleID = (change, roleIdInState, type, roles) => {
  if (!roleIdInState && Object.keys(roles).length > 1) {
    let role_id = '';
    Object.keys(roles).find((key) => {
      if (roles[key].name === type) {
        role_id = key;
        return null;
      }
    });
    change('role_id', role_id);
  }
};
class CreateUserForm extends PureComponent {
  componentDidMount() {
    const {
      roles, fetchRoles
    } = this.props;
    if (Object.keys(roles).length < 1) fetchRoles();
  }

  componentWillUpdate(nextProps) {
    const {
      type, change, roles, roleIdInState
    } = nextProps;
    injectRoleID(change, roleIdInState, type, roles);
  }

  render() {
    const {
      messages, handleSubmit, error, classes, type
    } = this.props;

    const clinicianDetailsFields = type === 'doctor'
      ? <ClinicianDetailsFormFields />
      : null;
    return (
      <Fragment>
        <Typography
          variant="display1"
          color="inherit"
          className={classes.title}
        >
          {`Add ${type} details`}
        </Typography>
        {error && <Alert messages={messages} type={error} />}

        <form onSubmit={handleSubmit}>
          <PersonalDetailsFormFields />

          <FormSection name="person">
            <AddressFormFields />

            {clinicianDetailsFields}
          </FormSection>

          <Button
            type="submit"
            color="primary"
            variant="contained"
            className={classes.submitButton}
          >
          SUBMIT
          </Button>
        </form>
      </Fragment>
    );
  }
}


CreateUserForm.propTypes = {
  handleSubmit: PropTypes.func,
  messages: PropTypes.shape({}),
  error: PropTypes.string,
  classes: PropTypes.shape({})
};


CreateUserForm.defaultProps = {
  handleSubmit: noop,
  messages: {
    default: 'default message'
  },
  error: undefined,
  classes: {}
};

export default withStyles(styles)(CreateUserForm);