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

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink, withRouter } from 'react-router-dom';
import { pushRoute } from 'store/utils/routes';

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton';
import AccountStructure from 'components/structure/AccountStructure';
import countries from 'data/countries';
import styleIdentifiers from './invoicingInfo.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type InvoicingInfoProps = StateProps & DispatchProps & OwnProps;

const InvoicingInfo = (props: InvoicingInfoProps) => {
  const { history } = props;
  const [toggleActive, setToggleActive] = useState(0);

  const lg = useSelector((state: StoreState) => state.content.lg);
  const profile = useSelector(
    (state: StoreState) => state.account.profile && state.account.profile.data,
  );

  const [billingInfo, setBillingInfo] = useState(profile?.paymentInfo?.billingInfos?.[0] || {});

  useEffect(() => {
    if (profile?.paymentInfo?.billingInfos?.[0])
      setBillingInfo(profile.paymentInfo.billingInfos[0]);
  }, [profile?.paymentInfo?.billingInfos]);

  // Allow to dispatch actions
  const dispatch = useDispatch();

  const renderCustomTag = () => {
    const customTag = billingInfo.customTags && billingInfo.customTags.type;

    if (!customTag) return null;

    return customTag === 'society'
      ? 'forms.billing.typeProfile.society'
      : 'forms.billing.typeProfile.freelance';
  };

  const billingInfos = (profile.paymentInfo && profile.paymentInfo.billingInfos) || [];

  return (
    <AccountStructure
      title="pages.account.invoicingDetails"
      rightLabel="pages.account.actions.edit"
      rightColor="primary"
      rightAction={() =>
        history.push(pushRoute('editInvoicingInfo.id', lg, { id: billingInfos[toggleActive]._id }))
      }
      className={styles('invoicing-info')}
    >
      {/* SWITCHER */}
      {billingInfos.length > 1 && (
        <div className={styles('toggle-wrapper')}>
          {billingInfos.map((info, index) => {
            const name = info.company || `${info.firstName} ${info.lastName}`;
            return (
              <div
                key={index}
                className={styles('toggle', toggleActive === index && 'active')}
                onClick={() => {
                  setToggleActive(toggleActive === index ? 0 : index);
                  setBillingInfo(info);
                }}
              >
                {name}
              </div>
            );
          })}
        </div>
      )}

      {billingInfo._id && (
        <div className={styles('info-wrapper')}>
          <div className={styles('info', 'company', 'active')}>
            <div className={styles('item')}>
              <TextItem path="forms.billing.typeProfile.typeProfile" className={styles('label')} />
              <TextItem path={renderCustomTag()} />
            </div>
            {billingInfo?.company && (
              <div className={styles('item')}>
                <TextItem
                  path={
                    billingInfo?.customTags.type === 'company'
                      ? 'forms.billing.companyName.companyName'
                      : 'forms.billing.freelanceCompanyName.text'
                  }
                  className={styles('label')}
                />
                <TextItem path={billingInfo.company} />
              </div>
            )}
            <div className={styles('item')}>
              <TextItem
                path="forms.billing.companyNumber.companyNumber"
                className={styles('label')}
              />
              <TextItem path={billingInfo.vatNumber} />
            </div>
            {billingInfo.fiscalForm && (
              <div className={styles('item')}>
                <TextItem path="forms.billing.fiscalForm.fiscalForm" className={styles('label')} />
                <TextItem path={billingInfo.fiscalForm} />
              </div>
            )}
            {billingInfo.address && (
              <>
                <div className={styles('item')}>
                  <TextItem path="forms.address.street.street" className={styles('label')} />
                  <TextItem path={billingInfo.address.street} />
                </div>
                <div className={styles('inline')}>
                  <div className={styles('item')}>
                    <TextItem path="forms.address.number.number" className={styles('label')} />
                    <TextItem path={billingInfo.address.number} />
                  </div>
                  {billingInfo.address.box && (
                    <div className={styles('item')}>
                      <TextItem path="forms.address.box.box" className={styles('label')} />
                      <TextItem path={billingInfo.address.box} />
                    </div>
                  )}
                </div>
                <div className={styles('item')}>
                  <TextItem path="forms.address.city.city" className={styles('label')} />
                  <TextItem path={billingInfo.address.city} />
                </div>
                <div className={styles('item')}>
                  <TextItem path="forms.address.zip.zip" className={styles('label')} />
                  <TextItem path={billingInfo.address.zip} />
                </div>
                <div className={styles('item')}>
                  <TextItem path="forms.address.country.country" className={styles('label')} />
                  <TextItem list={countries} item={billingInfo.address.country} />
                </div>
              </>
            )}
          </div>
        </div>
      )}

      <div className={styles('add')}>
        <ProjectButton
          label="forms.billing.addProfile"
          color="border-primary"
          action={() => history.push(pushRoute('addInvoicingInfo', lg))}
        />
      </div>
    </AccountStructure>
  );
};

export default InvoicingInfo;
