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 BreathingSelectors extends React.Component {
  state = {
    asthma: false,
    copd: false,
    smoker: 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 {
      asthma,
      copd,
      smoker,
    } = this.state;

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

    return (
      <div>
        <ConditionSelector
          subheading="Asthma"
          checked={asthma}
          condition="asthma"
          handleChange={this.handleChange}
          code="CA23"
          value="CA23"
          position={8}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="COPD"
          checked={copd}
          condition="copd"
          handleChange={this.handleChange}
          code="CA22"
          value="CA22"
          position={9}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="Smoker"
          checked={smoker}
          condition="smoker"
          handleChange={this.handleChange}
          code="QE13"
          value="QE13"
          position={10}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />
      </div>
    );
  }
}


export default withStyles(styles)(BreathingSelectors);