import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import { required } from 'store/utils/validation';
import ProjectInput from 'components/formItems/ProjectInput';
import { Field } from 'react-final-form';
import countries from 'data/countries';
import styleIdentifiers from './addressFields.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  strict: boolean;
}

export type AddressFieldsProps = StateProps & DispatchProps & OwnProps;

const AddressFields = (props: AddressFieldsProps) => {
  const { base, noMargin } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className={styles('address-fields')}>
      <Field
        component={ProjectInput}
        name={`${base}street`}
        noMargin={noMargin}
        type="string"
        label="forms.address.street.street"
        placeholder="forms.address.street.placeholder"
        validate={required}
      />

      <div className={styles('inlined')}>
        <Field
          component={ProjectInput}
          name={`${base}number`}
          type="string"
          label="forms.address.number.number"
          placeholder="forms.address.number.placeholder"
          validate={required}
        />
        <Field
          component={ProjectInput}
          name={`${base}box`}
          type="number"
          label="forms.address.box.box"
          placeholder="forms.address.box.placeholder"
        />
      </div>
      <Field
        component={ProjectInput}
        name={`${base}zip`}
        type="string"
        label="forms.address.zip.zip"
        placeholder="forms.address.zip.placeholder"
        validate={required}
      />
      <Field
        component={ProjectInput}
        name={`${base}city`}
        type="string"
        label="forms.address.city.city"
        placeholder="forms.address.city.placeholder"
        validate={required}
      />

      <Field
        component={ProjectInput}
        name={`${base}country`}
        type="select"
        seed="select"
        defaultValue="BE"
        items={countries}
        label="forms.address.country.country"
        filter
        placeholder="forms.address.country.placeholder"
        validate={required}
      />
    </div>
  );
};

export default AddressFields;
