import React, { useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom';
import { pushRoute } from 'store/utils/routes';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { FaCheck, FaTimesCircle, FaTrash } from 'react-icons/fa';
// Import actions here
import accountActions from 'store/account/actions';
import appActions from 'store/app/actions';

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import ProjectButton from 'components/items/ProjectButton';
import CustomIcon from 'components/items/CustomIcon';

import AccountStructure from 'components/structure/AccountStructure';
import account from 'store/account';
import ProjectModal from 'components/items/ProjectModal';
import styleIdentifiers from './paymentInfos.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type PaymentInfosProps = StateProps & DispatchProps & OwnProps;

const PaymentInfos = (props: PaymentInfosProps) => {
  const { history } = props;
  // 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 paymentMethods = profile?.paymentInfo?.paymentMethods;

  const deleteMethod = methodId => {
    dispatch(
      accountActions.deletePaymentMethod.request.action({
        id: methodId,
        success: 'forms.paymentMethod.deleteSuccess',
      }),
    );
  };

  const confirmDelete = methodId => {
    dispatch(
      appActions.dialog.show.action({
        id: 'custom',
        children: (
          <ProjectModal
            message="forms.paymentMethod.confirmDelete"
            actionRight={() => deleteMethod(methodId)}
          />
        ),
      }),
    );
  };

  const changeDefaultPaymentMethod = methodId => {
    dispatch(
      accountActions.updateDefaultPaymentMethod.request.action({
        id: methodId,
        success: 'forms.paymentMethod.successDefault',
      }),
    );
  };

  return (
    <AccountStructure title="pages.account.payment" className={styles('payment-infos')}>
      {profile && (
        <div className={styles('info-wrapper')}>
          <div className={styles('payments')}>
            <h2>
              <TextItem path="forms.paymentMethod.title" />
            </h2>

            <div className={styles('methods')}>
              <h3>
                <TextItem path="forms.paymentMethod.method" />
              </h3>

              {paymentMethods &&
                paymentMethods.length > 0 &&
                paymentMethods.map((method, key) => (
                  <div className={styles('single')} key={key}>
                    <span className={styles('card')}>{method.cardInfo.brand}</span>
                    <span className={styles('number')}>
                      **** **** ****
                      {method.cardInfo.last4}
                    </span>
                    {(method.default || paymentMethods.length === 1) && (
                      <span className={styles('default')}>
                        <FaCheck />
                      </span>
                    )}

                    <div
                      className={styles('delete-method')}
                      onClick={() => confirmDelete(method._id)}
                    >
                      <FaTrash />
                    </div>

                    {!method.default && (
                      <div
                        className={styles('choose-default')}
                        onClick={() => changeDefaultPaymentMethod(method._id)}
                      >
                        <TextItem path="forms.paymentMethod.chooseDefault" />
                      </div>
                    )}
                  </div>
                ))}

              {(!paymentMethods || paymentMethods.length === 0) && (
                <div className={styles('single')}>
                  <TextItem path="forms.paymentMethod.empty" />
                </div>
              )}
            </div>

            <ProjectButton
              label="forms.paymentMethod.add"
              color="border-primary"
              action={() => history.push(pushRoute('addPaymentMethod'))}
            />
          </div>
        </div>
      )}
    </AccountStructure>
  );
};

export default PaymentInfos;
