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 JointSelectors extends React.Component {
  state = {
    rheumatoidArthritis: false,
    osteoarthritis: 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 {
      rheumatoidArthritis,
      osteoarthritis,
    } = this.state;

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

    return (
      <div>
        <ConditionSelector
          subheading="Rheumatoid Arthritis"
          checked={rheumatoidArthritis}
          condition="rheumatoidArthritis"
          handleChange={this.handleChange}
          code="FA20"
          value="FA20"
          position={11}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />

        <ConditionSelector
          subheading="Osteoarthritis"
          checked={osteoarthritis}
          condition="osteoarthritis"
          handleChange={this.handleChange}
          code="FA0Z"
          value="FA0Z"
          position={12}
          change={change}
          messageId="page.conditions.highBloodPressure"
          recorder={recorder}
          patient={patient}
        />
      </div>
    );
  }
}

export default withStyles(styles)(JointSelectors);