import React from 'react';
import { Field } from 'react-final-form';

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

// Import actions here

import classNames from 'classnames/bind';
import Input from 'components/formItems/Input';
import Button from 'components/items/Button';
import FieldAdapter from 'components/formItems/FieldAdapter';

import { required, email, composeValidators } from 'store/utils/validation';
import { viewConfig } from 'config/general';
import styleIdentifiers from './GeoLocCustomAddressForm.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type GeoLocCustomAddressFormProps = StateProps & DispatchProps & OwnProps;

const GeoLocCustomAddressForm = (props: GeoLocCustomAddressFormProps) => {
  const { handleSubmit, cancel, submitting, valid } = props;

  const inputProps = (viewConfig && { ...viewConfig.inputProps }) || (viewConfig && viewConfig.inputProps);

  return (
    <form className={styles('geo-loc-custom-address-form')} onSubmit={handleSubmit}>
      <h2>Google autocomplete corrector</h2>
      <FieldAdapter {...inputProps} component={Input} name="box" label="Box" />
      <FieldAdapter {...inputProps} component={Input} name="number" label="Number" />
      <FieldAdapter {...inputProps} component={Input} name="street" label="Street line 1" />
      <FieldAdapter {...inputProps} component={Input} name="streetBis" label="Street line 2" />
      <FieldAdapter {...inputProps} component={Input} name="city" label="City" />
      <FieldAdapter {...inputProps} component={Input} name="zip" label="zip" />
      <FieldAdapter {...inputProps} component={Input} name="state" label="State" />
      <FieldAdapter {...inputProps} component={Input} name="country" label="Country" />
      <div className={styles('button-container')}>
        <Button label="Close" color="grey" action={cancel} />
        <Button disabled={submitting || !valid} label="Save" type="submit" />
      </div>
    </form>
  );
};

export default GeoLocCustomAddressForm;
