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

import ProjectInput from 'components/formItems/ProjectInput';

import { required } from 'store/utils/validation';

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

// Import actions here

import classNames from 'classnames/bind';
import styleIdentifiers from './ProfileFields.module.scss';
import AddressFields from '../AddressFields';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type ProfileFieldsProps = StateProps & DispatchProps & OwnProps;

const ProfileFields = (props: ProfileFieldsProps) => {
  const { noAddress } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  return (
    <div className={styles('profile-fields')}>
      <Field
        component={ProjectInput}
        name="firstName"
        type="string"
        label="forms.profile.firstName.firstName"
        placeholder="forms.profile.firstName.placeholder"
        validate={required}
      />
      <Field
        component={ProjectInput}
        name="lastName"
        type="string"
        label="forms.profile.lastName.lastName"
        placeholder="forms.profile.lastName.placeholder"
        validate={required}
      />
      {!noAddress && <AddressFields base="address." />}
      <Field
        component={ProjectInput}
        name="phoneNumber"
        type="string"
        label="forms.profile.phoneNumber.phoneNumber"
        placeholder="forms.profile.phoneNumber.placeholder"
        validate={required}
      />
      <Field
        component={ProjectInput}
        name="birthDate"
        seed="date"
        label="forms.profile.birthday.birthday"
      />
      <Field
        component={ProjectInput}
        name="gender"
        type="select"
        seed="select"
        items="forms.profile.gender.list"
        label="forms.profile.gender.gender"
        placeholder="forms.profile.gender.placeholder"
      />
    </div>
  );
};

export default ProfileFields;
