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

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

import AddressFields from 'components/formItems/AddressFields';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import { required } from 'store/utils/validation';
import get from 'lodash/get';
import styleIdentifiers from './BillingFields.module.scss';

const styles = classNames.bind(styleIdentifiers);

export interface BillingFields {}

const BillingFields = (props: BillingFieldsProps) => {
  const { values, base = '', twoColumns } = props;

  const type = get(values, `${base}customTags.type`);

  return (
    <div className={styles('billing-fields', twoColumns && 'row')}>
      <div className={styles('col-6')}>
        <Field
          component={ProjectInput}
          name={`${base}customTags.type`}
          type="select"
          seed="select"
          items="forms.billing.typeProfile.type"
          label="forms.billing.typeProfile.typeProfile"
          validate={required}
        />
        <Field
          component={ProjectInput}
          name={`${base}firstName`}
          type="string"
          label="forms.billing.firstName.text"
          placeholder="forms.billing.firstName.placeholder"
          validate={required}
        />
        <Field
          component={ProjectInput}
          name={`${base}lastName`}
          type="string"
          label="forms.billing.lastName.text"
          placeholder="forms.billing.lastName.placeholder"
          validate={required}
        />

        {type === 'society' && (
          <>
            <Field
              component={ProjectInput}
              name={`${base}fiscalForm`}
              type="select"
              seed="select"
              filter
              items="lists.fiscalForms"
              label="forms.billing.fiscalForm.fiscalForm"
              placeholder="forms.billing.fiscalForm.placeholder"
              validate={required}
            />
            <Field
              component={ProjectInput}
              name={`${base}company`}
              label="forms.billing.companyName.companyName"
              placeholder="forms.billing.companyName.placeholder"
              validate={required}
            />
          </>
        )}
        {values.customTags && values.customTags.type === 'freelance' && (
          <>
            <Field
              component={ProjectInput}
              name={`${base}company`}
              label="forms.billing.freelanceCompanyName.text"
              placeholder="forms.billing.freelanceCompanyName.placeholder"
            />
          </>
        )}
        <Field
          component={ProjectInput}
          name={`${base}vatNumber`}
          type="string"
          label="forms.billing.companyNumber.companyNumber"
          placeholder="forms.billing.companyNumber.placeholder"
          validate={required}
        />
      </div>
      <div className={styles('col-6')}>
        <AddressFields base={`${base}address.`} />
      </div>
    </div>
  );
};

export default BillingFields;
