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

const AddressFormFields = () => (
  <Fragment>
    <Typography
      variant="caption"
      color="inherit"
    >
      <br />
          Address Information
    </Typography>
    <FormSection name="addresses.0">
      <Field
        name="country"
        select
        label="Country"
        fullWidth
        component={TextInput}
      >
        {countries.map(option => (
          <MenuItem key={option.name} value={option.alpha2}>
            {option.name}
          </MenuItem>
        ))}
      </Field>

      <Field
        name="city"
        type="text"
        label="City"
        fullWidth
        component={TextInput}
      />

      <Field
        name="name"
        type="text"
        label="House name / number"
        fullWidth
        component={TextInput}
      />

      <Field
        name="street"
        type="text"
        label="Street"
        fullWidth
        component={TextInput}
      />

      <Field
        name="state"
        type="text"
        label="State / Province"
        fullWidth
        component={TextInput}
      />

      <Field
        name="zip"
        type="text"
        label="Zip"
        fullWidth
        component={TextInput}
      />
    </FormSection>

  </Fragment>
);

export default AddressFormFields;