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 ProjectInput from 'components/formItems/ProjectInput';
import ProjectButton from 'components/items/ProjectButton';
import BillingFields from 'components/formItems/BillingFields';
import ProfileFields from 'components/formItems/ProfileFields';
import AddressFields from 'components/formItems/AddressFields';
import styleIdentifiers from './signupStep2Form.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type SignupStep2FormProps = StateProps & DispatchProps & OwnProps;

const SignupStep2Form = (props: SignupStep2FormProps) => {
  const { handleSubmit, values, form, submitting, valid } = props;

  // mapStateToProps

  const handleBilling = value => {
    console.log('values', value);
    if (value === 'no') {
      form.change('billingInfo', undefined);
    }
    if (value === 'yes') {
      form.change('billingInfos', {
        firstName: values?.firstName,
        lastName: values?.lastName,
        address: values?.address,
      });
    }
  };

  return (
    <form className={styles('SignupStep2Form')} onSubmit={handleSubmit}>
      <div className={styles('row')}>
        <div className={styles('col-6')}>
          <ProfileFields noAddress />
        </div>
        <div className={styles('col-6')}>
          <AddressFields base="address." />
        </div>
      </div>
      <div className={styles('pro')}>
        <Field
          component={ProjectInput}
          classic
          onChange={handleBilling}
          name="addBillingInfo"
          seed="radio"
          label="forms.billing.billingInfo.text"
          items={[
            {
              value: 'yes',
              label: 'lists.yesNo.yes',
            },
            {
              value: 'no',
              label: 'lists.yesNo.no',
            },
          ]}
          customClassName={styles('no-border')}
        />
      </div>
      {values.addBillingInfo === 'yes' && (
        <BillingFields twoColumns base="billingInfos." values={values} />
      )}

      <ProjectButton
        color="primary"
        align="center"
        disabled={submitting || !valid}
        right
        label="forms.signUp.continue"
        type="submit"
      />
    </form>
  );
};

export default SignupStep2Form;
