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

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

// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import actionsBuilder from 'store/appActions';
import Loading from 'components/items/Loading';
import AccountStructure from 'components/structure/AccountStructure';
import styleIdentifiers from './payout.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type PayoutProps = StateProps & DispatchProps & OwnProps;

const Payout = (props: PayoutProps) => {
  // mapStateToProps
  const profile = useSelector((state: StoreState) => state.account.profile?.data);

  const [loading, setLoading] = useState(false);

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

  const actions = actionsBuilder(dispatch, ['stripeLink', 'stripeRefresh', 'stripeDashboardLink']);

  const refreshProfile = () => {
    if (!loading) setLoading(true);

    if (profile?.payoutInfo?.stripeInfo?.detailsSubmitted) {
      setLoading(false);
      return;
    }

    actions.accountStripeRefresh({
      noLoading: true,
      noFeedback: true,
    });
  };

  const linkProfile = () => {
    actions.accountStripeLink({
      callback: res => {
        window.open(res, '_blank');
      },
    });
  };

  const goDashboard = () => {
    actions.accountStripeDashboardLink({
      callback: res => {
        window.open(res, '_blank');
      },
    });
  };
  // on mount
  useEffect(() => {
    refreshProfile();
  }, []);

  useEffect(() => {
    const timeoutID = setTimeout(refreshProfile, 5000);

    return () => {
      if (timeoutID) clearTimeout(timeoutID);
    };
  }, [profile]);

  if (!profile) return false;

  return (
    <AccountStructure title="pages.payout.title" className={styles('payout')}>
      {profile.payoutInfo && loading && (
        <>
          <div>
            <div className={styles('loading')}>
              <TextItem path="pages.payout.syncInProgress" />
            </div>
          </div>
          <ProjectButton
            relative
            color="border-primary"
            label="pages.payout.finishSync"
            action={goDashboard}
          />
        </>
      )}
      {!profile.payoutInfo && (
        <>
          <ProjectButton relative label="pages.payout.sync" action={linkProfile} />
          <TextItem tag="div" className={styles('disclaimer')} path="pages.payout.disclaimer" />
        </>
      )}
      {!loading && profile.payoutInfo?.stripeInfo?.detailsSubmitted && (
        <div className={styles('success')}>
          <div>
            <TextItem path="pages.payout.syncSuccess" />
          </div>
          <ProjectButton
            relative
            color="border-primary"
            label="pages.payout.dashboard"
            action={goDashboard}
          />
        </div>
      )}
    </AccountStructure>
  );
};

export default Payout;
