import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import ConditionSelector from './ConditionSelector/ConditionSelector';

const styles = theme => ({
  label: {
    margin: theme.spacing.unit * 20
  },
});


class MoodSelectors extends React.Component {
  state = {
    anxiety: false,
    depression: false
  }

  handleChange = ({ condition, position, value }) => () => {
    const { change, input } = this.props;
    this.setState((prevState) => {
      const checked = !prevState[condition];
      change(`${input.name}[${position}]`, checked && value);
      return ({ [condition]: checked });
    });
  };

  render() {
    const {
      anxiety,
      depression,
    } = this.state;

    const { change, patient, recorder } = this.props;

    return (
      <div>
        <ConditionSelector
          subheading="Anxiety"
          checked={anxiety}
          condition="anxiety"
          handleChange={this.handleChange}
          code="MB24"
          value="MB24"
          position={13}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="Depression"
          checked={depression}
          condition="depression"
          handleChange={this.handleChange}
          code="6A7Z"
          value="6A7Z"
          position={14}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />
      </div>
    );
  }
}

export default withStyles(styles)(MoodSelectors);