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 CardiovascularSelectors extends React.Component {
  state = {
    highBloodPressure: false,
    heartAttack: false,
    highCholesterol: false,
    atrialFibrillation: false,
    stroke: 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 {
      highBloodPressure,
      highCholesterol,
      heartAttack,
      atrialFibrillation,
      stroke,
    } = this.state;

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

    return (
      <div>
        <ConditionSelector
          subheading="High blood pressure"
          checked={highBloodPressure}
          condition="highBloodPressure"
          handleChange={this.handleChange}
          code="BA00"
          value="BA00"
          position={0}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="Heart Attack"
          checked={heartAttack}
          condition="heartAttack"
          handleChange={this.handleChange}
          code="BA50"
          value="BA50"
          position={1}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="High cholesterol"
          checked={highCholesterol}
          condition="highCholesterol"
          handleChange={this.handleChange}
          code="5C80.0"
          value="5C80.0"
          position={2}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="Atrial fibrillation"
          checked={atrialFibrillation}
          condition="atrialFibrillation"
          handleChange={this.handleChange}
          code="BC81.3"
          value="BC81.3"
          position={3}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="Stroke"
          checked={stroke}
          condition="stroke"
          handleChange={this.handleChange}
          code="8B11"
          value="8B11"
          position={4}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />
      </div>
    );
  }
}


export default withStyles(styles)(CardiovascularSelectors);