import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import { FormattedMessage } from 'react-intl';
import AdditionalField from '../../AdditionalField/AdditionalField';

const statement = {
  code: '', // Code UUID
  patient: '', // Patient UUID
  recorder: '', // Clinician UUID
  asserter: '', // Clinician // patient uuid UUID
  // clinicalStatus: '',
  // verificationStatus: '',
  // severity: '',
  // note: '',
  // onsetDateTime: ''
};
const styles = theme => ({
  hr: {
    margin: '0px'
  }
});

const ConditionSelector = ({
  subheading,
  checked,
  handleChange,
  code,
  value,
  position,
  change,
  condition,
  classes,
  messageId,
  patient,
  recorder
}) => (
  <Fragment>
    <FormattedMessage id={messageId} />
    <Grid
      container
      justify="space-between"
      alignItems="center"
    >
      <Typography
        variant="subheading"
        component="p"
      >
        {subheading}
      </Typography>
      <Switch
        checked={checked}
        onChange={handleChange({
          condition,
          position,
          value: {
            ...statement,
            code,
            patient,
            asserter: patient,
            recorder
          }
        })}
        value={value}
        color="primary"
      />
    </Grid>
    <hr className={classes.hr} />
    {(checked)
      ? (
        <Grid
          container
          justify="center"
        >
          <AdditionalField change={change} position={position} />
        </Grid>
      ) : null}
  </Fragment>
);

export default withStyles(styles)(ConditionSelector);