import React, { Fragment, PureComponent } from 'react';
import { Field, FormSection } from 'redux-form';

import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Switch from '@material-ui/core/Switch';
import { Typography } from '@material-ui/core';

import TextInput from '../../TextInput/TextInput';
import GenderSelector from '../../GenderSelector/GenderSelector';

const styles = theme => ({
  title: {
    marginTop: theme.spacing.unit * 9,
    marginBottom: theme.spacing.unit * 6
  },
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  }
});

const Extra = () => (
  <Fragment>
      <Field
        name="firstname"
        type="text"
        label="First name"
        fullWidth
        component={TextInput}
      />
      <Field
        name="lastname"
        type="text"
        label="Last name"
        fullWidth
        component={TextInput}
      />
      <Field
        name="middlename"
        type="text"
        label="Other names"
        fullWidth
        component={TextInput}
      />

      <Field
        name="dob"
        type="date"
        InputLabelProps={{
          shrink: true
        }}
        label="Date of birth"
        fullWidth
        component={TextInput}
      />

      <Field
        name="gender"
        type="text"
        fullWidth
        component={GenderSelector}
      />
  </Fragment>
);

class PatientDetailsFields extends PureComponent {
  state = {
    advancedSearch: false
  }

  handleAdvancedSearchToggle = () => (
    this.setState(prevState => ({
     advancedSearch: !prevState.advancedSearch
   }))
  )

  render() {
    const { messages, handleSubmit, error, classes } = this.props;

  const { advancedSearch } = this.state;

  return (
    <Fragment>
      <FormSection name="patientSearch">
      <Grid
        container
        justify="space-between"
        alignItems="center"
      >
        <Typography
          variant="caption"
          color="inherit"
          className={classes.title}
        >
          {'Search'}
        </Typography>

        <Switch
          color="primary"
          checked={advancedSearch}
          onChange={() => this.handleAdvancedSearchToggle()}
        />
      </Grid>
      {advancedSearch ? <Extra /> : null}

      </FormSection>
    </Fragment>
  )
}
}

export default withStyles(styles)(PatientDetailsFields);