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

// Material Components
import { Typography } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
import { languages, maritalStatuses } from '@elephant-healthcare/primary-care-utils';
import TextInput from '../../../TextInput/TextInput';
import GenderSelector from '../../../GenderSelector/GenderSelector';

const PersonalDetailsFormFields = () => (
  <Fragment>
    <Typography variant="caption" color="inherit">
      <br />
        General
    </Typography>
    <FormSection name="person">
      <FormSection name="name">
        <Field
          name="firstname"
          type="text"
          label="First name"
          required
          fullWidth
          component={TextInput}
        />

        <Field
          name="lastname"
          type="text"
          label="Last Name"
          required
          fullWidth
          component={TextInput}
        />

        <Field
          name="middlename"
          type="text"
          label="Other names"
          fullWidth
          component={TextInput}
        />

      </FormSection>

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

      <GenderSelector required />

      <FormSection name="languages.0">
        <Field
          name="locale"
          select
          label="Language"
          fullWidth
          component={TextInput}
        >
          {languages.map(option => (
            <MenuItem key={option.name} value={option.alpha2}>
              {option.name}
            </MenuItem>
          ))}
        </Field>
      </FormSection>

      <Field
        name="maritalStatus"
        select
        label="Marital Status"
        fullWidth
        component={TextInput}
      >
        {maritalStatuses.map(option => (
          <MenuItem key={option.name} value={option.code}>
            {option.name}
          </MenuItem>
        ))}
      </Field>
    </FormSection>

    <FormSection name="uids">
      <Field
        name="unhcr"
        type="text"
        label="UNHCR Number"
        fullWidth
        component={TextInput}
      />
    </FormSection>

  </Fragment>
);

export default PersonalDetailsFormFields;