import './checkout.scss';

import * as log from 'loglevel';
import React, { FC, useEffect, useState } from 'react';

import Button from '../../components/Button/button';
import ImageIcon from '../../components/ImageIcon';
import Modal from '../../components/Modal';
import {
  getBalance,
  getClientID,
  getUserPaymentId,
  makePayment as makePaymentAPI,
} from '../../factory/api';
import { numberWithCommas } from '../../utils/helperFunctions';
import Method from './Method';
import { MiniAppErrorType } from '../../model/miniAppError';
import i18n from '../../i18n';

enum PaymentState {
  Payment = 0,
  InsufficientBalance,
  SelectPaymentMethod,
  PaymentLoading,
  PaymentFailed,
  Done,
  Cancelled,
}

export interface CheckoutProp {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  successCB?: (result: any) => void;
  failCB?: (error: any) => void;
  completeCB?: () => void;
  paymentParams: any;
}
const Checkout: FC<CheckoutProp> = (props) => {
  const {
    visible,
    toggleVisible,
    successCB,
    failCB,
    completeCB,
    paymentParams,
  } = props;

  const [state, setState] = useState<PaymentState>(PaymentState.Payment);
  const [balance, setBalance] = useState<number>(0);

  useEffect(() => {
    const f = async () => {
      try {
        const res: any = await getBalance();
        if (res.data.unsigned.resultInfo.code === 'SUCCESS') {
          const newBalance = res.data.unsigned.data.totalBalance
            .amount as number;
          setBalance(newBalance);
        }
      } catch (error) {
        setState(PaymentState.PaymentFailed);
        log.error(`Get balance error: ${JSON.stringify(error)}`);
      }
    };
    if (visible) {
      f();
    } else {
      // restore all status here
      const timer = setTimeout(() => {
        setState(PaymentState.Payment);
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [visible]);

  const handlePayment = async () => {
    try {
      setState(PaymentState.PaymentLoading);
      const paymentIdResponse: any = await getUserPaymentId({
        merchant: paymentParams.merchantAlias || '214489107898851328',
        sourceInfoApp: paymentParams.sourceInfoApp,
        type: paymentParams.type || 'ACQUIRING',
      });
      const paymentMethodId = paymentIdResponse?.data?.unsigned?.data?.payload?.paymentMethodList?.find(
        (o: any) => o.paymentMethodType === 'WALLET'
      ).paymentMethodId;
      const res: any = await makePaymentAPI(
        {
          clientId: getClientID(),
          merchant: paymentParams.merchantAlias || '214489107898851328',
          agreeSimilarTransaction: true,
        },
        {
          merchantPaymentId:
            paymentParams.merchantPaymentId ||
            '7615c171-a97d-4cc1-b749-b7644929c5b9-TEST-BY-ME-AGAIN',
          amount: paymentParams.amount,
          paymentMethodId: paymentMethodId,
          requestedAt:
            paymentParams.requestedAt || Math.round(Date.now() / 1000),
          storeId: paymentParams.storeId,
          terminalId: paymentParams.storeId,
          orderReceiptNumber: paymentParams.orderReceiptNumber,
          orderDescription: paymentParams.orderDescription,
          orderItems: paymentParams.orderItems,
          sourceInfoApp: paymentParams.sourceInfoApp,
        }
      );
      if (
        res.data.unsigned.resultInfo.code === 'SUCCESS' &&
        res.data.unsigned.data.status === 'COMPLETED'
      ) {
        setState(PaymentState.Done);
        successCB &&
          successCB({
            jws: res.data.signed.jws,
          });
      } else if (res.status === 401) {
        failCB &&
          failCB({
            errorCode: MiniAppErrorType.invalidHeader,
          });
      } else {
        failCB &&
          failCB({
            errorCode: MiniAppErrorType.paymentFail,
          });
      }
    } catch (error) {
      failCB &&
        failCB({
          errorCode: MiniAppErrorType.serverError,
        });
    } finally {
      completeCB && completeCB();
      toggleVisible(!visible);
      await new Promise((r) => setTimeout(() => r(), 100));
    }
  };

  const renderSuccessToast = () => {
    return state === PaymentState.Done ? (
      <div>
        <ImageIcon className="checkout-btn-success" src="green-tick" />
      </div>
    ) : null;
  };

  const renderPaymentLoading = () => {
    return state === PaymentState.PaymentLoading ? (
      <div className="checkout-btn-loading-label">
        {i18n.t('checkout.loadinglbl')}
      </div>
    ) : null;
  };

  const renderInsufficientText = () => {
    return state === PaymentState.InsufficientBalance ? (
      <div className="checkout-warning"> {i18n.t('checkout.nobalance')}</div>
    ) : null;
  };

  const renderButtons = () => {
    if (state === PaymentState.Done) {
      return null;
    }
    let payBtnText = '';
    if (state === PaymentState.Payment) {
      payBtnText = i18n.t('button.pay');
    } else if (state === PaymentState.InsufficientBalance) {
      payBtnText = i18n.t('button.charge');
    }
    return (
      <>
        <Button
          btnType="primary"
          className="checkout-btn-size checkout-btn-wrapper"
          onClick={() => handlePayment()}
          loading={state === PaymentState.PaymentLoading}
        >
          {payBtnText}
        </Button>
        {state === PaymentState.InsufficientBalance ? (
          <Button className="checkout-btn-size">
            {i18n.t('button.cancel')}
          </Button>
        ) : null}
      </>
    );
  };

  const renderTopIcon = () => {
    const set = new Set([PaymentState.PaymentLoading, PaymentState.Done]);
    return !set.has(state) ? (
      <ImageIcon
        className="checkout-close-icon"
        src="iconHalfsheetClose"
        onClick={() => toggleVisible(!visible)}
      />
    ) : null;
  };

  const renderBalanceSection = () => {
    const set = new Set([PaymentState.PaymentLoading, PaymentState.Done]);
    return !set.has(state) ? (
      <>
        <div className="checkout-divider" />

        <div className="checkout-money">
          <div className="checkout-money-label-container">
            <span className="checkout-money-label">
              {i18n.t('checkout.method')}
            </span>
          </div>
          <div className="checkout-money-balance-container">
            <div>
              <ImageIcon
                className="checkout-money-balance-icon"
                src="imgBalance"
              />
            </div>
            <div>
              <div>
                <span className="checkout-money-balance-label">
                  {i18n.t('checkout.paybalance')}
                </span>
              </div>
              <div>
                <span className="checkout-money-balance-number">
                  {`利用可能額：${balance}円`}
                </span>
              </div>
            </div>
            <div>
              <ImageIcon
                className="checkout-money-next-icon"
                src="iconArrowsmallrightSingle"
                onClick={() => setState(PaymentState.SelectPaymentMethod)}
              />
            </div>
          </div>
        </div>
      </>
    ) : null;
  };

  const renderPayment = () => {
    return state !== PaymentState.SelectPaymentMethod ? (
      <div className="checkout">
        <div className="checkout-header">
          {renderTopIcon()}
          <p className="checkout-header-label">{i18n.t('checkout.payment')}</p>
        </div>

        <div className="checkout-divider" />

        <div className="checkout-money">
          <div className="checkout-money-label-container">
            <span className="checkout-money-label">
              {i18n.t('checkout.payamount')}
            </span>
          </div>
          <div className="checkout-money-number-container">
            <span className="checkout-money-number">
              {numberWithCommas(paymentParams.amount.amount)}
            </span>
            <span className="checkout-money-unit">円</span>
          </div>
        </div>

        {renderBalanceSection()}

        {renderInsufficientText()}

        <div className="checkout-btn-container">
          {renderSuccessToast()}
          {renderPaymentLoading()}
          {renderButtons()}
        </div>
      </div>
    ) : null;
  };

  const renderSelectPaymentMethod = () => {
    const isVisible = state === PaymentState.SelectPaymentMethod;
    return isVisible ? (
      <Method backCB={() => setState(PaymentState.Payment)} />
    ) : null;
  };

  return (
    <Modal visible={visible}>
      {renderPayment()}
      {renderSelectPaymentMethod()}
    </Modal>
  );
};

export default Checkout;