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

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

// Import actions here
import accountActions from 'store/account/actions';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton';
import EditInvoicingInfoForm from 'components/forms/EditInvoicingInfoForm';
import { FaTrash } from 'react-icons/fa';
import AccountStructure from 'components/structure/AccountStructure';
import { pushRoute } from 'store/utils/routes';
import styleIdentifiers from './editInvoicingInfo.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type EditInvoicingInfoProps = StateProps & DispatchProps & OwnProps;

const EditInvoicingInfo = (props: EditInvoicingInfoProps) => {
  const { history, match } = props;
  const [toggleActive, setToggleActive] = useState(1);
  const [initials, setInitials] = useState();
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const profile = useSelector(
    (state: StoreState) => state.account.profile && state.account.profile.data,
  );
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const updateBillingInfos = data =>
    dispatch(accountActions.updateBillingInfos.request.action(data));
  const addBillingInfos = data => dispatch(accountActions.addBillingInfos.request.action(data));

  const deleteInfo = () => {
    if (initials._id) {
      dispatch(
        accountActions.deleteBillingInfos.request.action({
          id: initials._id,
          callback: res => {
            history.push(pushRoute('invoicingInfo', lg));
          },
          success: 'forms.billing.successDelete',
        }),
      );
    }
  };

  const handleSubmit = values => {
    delete values.profile;

    if (values._id) {
      // console.log('hello', profile);
      updateBillingInfos({
        id: values._id,
        data: values,
        callback: res => {
          history.push(pushRoute('invoicingInfo', lg));
        },
        success: 'forms.billing.successEdit',
      });
    } else {
      addBillingInfos({
        data: values,
        callback: res => {
          history.push(pushRoute('invoicingInfo', lg));
        },
        success: 'forms.billing.successAdd',
      });
    }
  };

  useEffect(() => {
    if (match && match.params && match.params.id) {
      const found = find(profile.paymentInfo.billingInfos, infos => {
        return infos._id === match.params.id;
      });
      setInitials(found);
    }
  }, []);

  const deleteItem = () => {
    if (initials && initials._id)
      return (
        <div className={styles('trash-container')}>
          <div className={styles('circle')} onClick={() => deleteInfo()}>
            <FaTrash />
          </div>
        </div>
      );

    return false;
  };

  return (
    <AccountStructure
      title="pages.account.invoicingDetails"
      otherRightElem={deleteItem()}
      rightBack
      className={styles('edit-invoicing-info')}
    >
      <Form component={EditInvoicingInfoForm} initialValues={initials} onSubmit={handleSubmit} />
    </AccountStructure>
  );
};

export default EditInvoicingInfo;
