import React from 'react';
import { Form, 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 { required, email, composeValidators } from 'store/utils/validation';
import ProjectInput from 'components/formItems/ProjectInput/ProjectInput';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import app from 'store/app';
import account from 'store/account';
import order from 'store/order';
import { pushRoute } from 'store/utils/routes';
import TextItem from 'components/items/TextItem';
import styleIdentifiers from './CheckoutPaymentInfoForm.module.scss';
import EditInvoicingInfoForm from '../EditInvoicingInfoForm';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {
  onSubmit: Function;
}

export type CheckoutPaymentInfoFormProps = StateProps & DispatchProps & OwnProps;

const CheckoutPaymentInfoForm = (props: CheckoutPaymentInfoFormProps) => {
  const { handleSubmit, disclaimer, submitting, valid, values, actionDelete } = props;

  // mapStateToProps
  const content = useSelector((state: StoreState) => state.content.raw);
  const profile = useSelector((state: StoreState) => state.account.profile?.data);

  const dispatch = useDispatch();
  const addBillingInfos = data => dispatch(account.actions.addBillingInfos.request.action(data));

  const dialogShow = data => dispatch(app.actions.dialog.show.action(data));
  const dialogHide = data => dispatch(app.actions.dialog.hide.action(data));

  const invoicingProfiles = profile?.paymentInfo?.billingInfos;

  const submitBilling = vals => {
    addBillingInfos({
      data: vals,
      callback: res => {
        dialogHide('custom');
      },
      success: 'forms.billing.successAdd',
    });
  };

  const addBilling = () => {
    dialogShow({
      id: 'custom',
      children: (
        <div className={styles('add-billing')}>
          <Form
            onSubmit={submitBilling}
            // initialValues={{
            //   customTags: {
            //     type: 'society',
            //   },
            //   vatNsumber: 'BE6131313131',
            //   firstName: 'Nicolas',
            //   lastName: 'Bernier',
            //   company: 'Bernier Consulting',
            //   address: {
            //     street: 'rue goffart',
            //     number: '11',
            //     city: 'Bruxelles',
            //     zip: '1050',
            //     country: 'BE',
            //   },
            // }}
            component={EditInvoicingInfoForm}
          />
        </div>
      ),
    });
  };

  console.log('invoicingProfiles', invoicingProfiles);

  return (
    <form className={styles('checkout-payment-info-form')} onSubmit={handleSubmit}>
      {invoicingProfiles?.length && (
        <>
          <Field
            component={ProjectInput}
            seed="checkbox"
            name="addBilling"
            type="checkbox"
            label="forms.checkout.billing.addBilling"
          />
          {values.addBilling && (
            <>
              <Field
                component={ProjectInput}
                name="billingInfo"
                seed="select"
                modelValues={{
                  value: 'vatNumber',
                  text: '{company} ({vatNumber})',
                }}
                asObject
                items={invoicingProfiles}
                label="forms.checkout.billing.selectBilling"
                // placeholder="forms.checkout.cardMethod.placeholder"
                validate={required}
              />
            </>
          )}
        </>
      )}
      <ProjectButton
        small
        color="border-primary"
        relative
        label="forms.checkout.billing.newBilling"
        action={addBilling}
      />

      {disclaimer && <TextItem path={disclaimer} className={styles('disclaimer')} />}
      <div className={styles('buttons')}>
        {actionDelete && (
          <ProjectButton
            relative
            noMargin
            color="red"
            label="forms.checkout.billing.deleteOrder"
            action={actionDelete}
          />
        )}
        <ProjectButton
          relative
          noMargin
          color="primary"
          disabled={submitting || !valid}
          label="forms.checkout.billing.continue"
          type="submit"
        />
      </div>
    </form>
  );
};

export default CheckoutPaymentInfoForm;
