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

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

// Components
import Alert from '../Alert/Alert';

import renderMedications from './renderMedications';
import green from '../../../style/theme/colors/green';

const styles = theme => ({
  list: {
    listStyleType: 'none',
    paddingLeft: '0px'
  },
  addButton: {
    color: green[200],
    cursor: 'pointer'
  },
  addButtonText: {
    display: 'inline-block'
  },
  hr: {
    margin: `0px -${theme.spacing.unit * 2}px`,
    height: '3px',
    background: '#c2c2c2'
  },
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  }
});

class AddMedicationsForm extends PureComponent {
  state={
    takeMedicine: false
  }

  componentDidMount() {
    const { change, patient, recorder } = this.props;
    change('patient', patient);
    change('recorder', recorder);
  }

  handleChange= (payload) => {
    const { change } = this.props;
    this.setState(prevState => ({
      takeMedicine: !prevState.takeMedicine
    }), () => change('medications', payload));
  }

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

    const { takeMedicine } = this.state;

    return (
      <Fragment>
        <Grid
          container
          justify="space-between"
          alignItems="center"
        >
          <Typography
            variant="display1"
            color="inherit"
            className={classes.title}
          >
            {'Do you take any regular Medicines?'}
          </Typography>

          <Switch
            color="primary"
            checked={takeMedicine}
            onChange={takeMedicine ? () => this.handleChange([]) : () => this.handleChange([{}])}
          />
        </Grid>

        {error && <Alert messages={messages} type={error} />}

        <form onSubmit={handleSubmit}>
          {takeMedicine
            ? <FieldArray name="medications" props={{ classes }} component={renderMedications} />
            : null}
          <Button
            type="submit"
            color="primary"
            variant="contained"
            className={classes.submitButton}
          >
          SUBMIT
          </Button>
        </form>
      </Fragment>
    );
  }
}


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


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

export default withStyles(styles)(AddMedicationsForm);