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 } from '@elephant-healthcare/primary-care-utils';
import TextInput from '../../TextInput/TextInput';
import PasswordInput from '../../PasswordInput/PasswordInput';
import GenderSelector from '../../GenderSelector/GenderSelector';


const PersonalDetailsFormFields = () => (
  <Fragment>
    <Typography variant="caption" color="inherit">
      <br />
        Personal Details
    </Typography>
    <FormSection name="person">
      <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}
      />

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

      <Field
        name="gender"
        required
        type="text"
        fullWidth
        component={GenderSelector}
      />

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

      <Field
        name="telephone"
        type="text"
        label="Telephone"
        placeholder="Include intl code e.g. 961"
        required
        fullWidth
        component={TextInput}
      />
    </FormSection>


    <Field
      name="email"
      type="email"
      label="E-mail"
      fullWidth
      required
      component={TextInput}
    />

    <Field
      name="password"
      type="password"
      label="Password"
      fullWidth
      required
      component={PasswordInput}
    />

  </Fragment>
);

export default PersonalDetailsFormFields;