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

import {
  useDispatch,
  useSelector,
} from 'react-redux';

import confirmCardImage from '../../../assets/images/img-checkout-complete.png';
import {
  sendLogGNB,
  sendLogPaymentComplete,
} from '../../actions/logActions';
import {
  popPanel,
  pushPanel,
  resetPanels,
} from '../../actions/panelActions';
import CustomImage from '../../components/CustomImage/CustomImage';
import TButton from '../../components/TButton/TButton';
import TPanel from '../../components/TPanel/TPanel';
import * as Config from '../../utils/Config';
import {
  $L,
  formatCurrencyValue,
} from '../../utils/helperMethods';
import { myPageComponents } from '../MyPagePanel/MyPagePanel';
import css from './ConfirmPanel.module.less';

export default function ConfirmPanel({ spotlightId }) {
  const dispatch = useDispatch();

  const panels = useSelector((state) => state.panels.panels);
  const myPageTabs = useSelector((state) => state.home.menuData.data.mypage);
  const myOrder =
    myPageTabs.find((item) => item.menuId === Config.MYPAGE_TABS.MY_ORDERS) ||
    {};

  const panelInfo = panels.find(
    (panel) => panel.name === "confirmpanel"
  )?.panelInfo;
  const {
    bilCityNm,
    bilCtpt,
    bilDtlAddr,
    bilEmalAddr,
    bilOdrFnm,
    bilOdrLnm,
    bilStatNm,
    bilZpcd,
    cardKnd,
    dlvrCityNm,
    dlvrCtpt,
    dlvrDate,
    dlvrDtlAddr,
    dlvrEmalAddr,
    dlvrOdrFnm,
    dlvrOdrLnm,
    dlvrZpcd,
    ordNo,
    expsOrdNo,
    realTotAmt,
    totDlvrAmt,
  } = panelInfo?.orderInfo || {};
  const auctProdYn = panelInfo?.auctProdYn;
  const currSign = panelInfo?.currSign;
  const currSignLoc = panelInfo?.currSignLoc;
  const auctFinalPriceChgDt = panelInfo?.auctFinalPriceChgDt;
  const logInfo = panelInfo?.logInfo || {};

  useEffect(() => {
    dispatch(sendLogGNB(Config.LOG_MENU.CHECKOUT_ORDER_COMPLETE));

    if (logInfo && Object.keys(logInfo).length > 0) {
      setTimeout(() => dispatch(sendLogPaymentComplete(logInfo)));
    }
  }, [logInfo]);

  const handleCancel = useCallback((e) => {
    if (e && typeof e.preventDefault === "function") {
      e.preventDefault();
    }
    if (e && typeof e.stopPropagation === "function") {
      e.stopPropagation();
    }
  }, []);

  const handleReviewClick = useCallback(() => {
    dispatch(resetPanels());
    dispatch(
      pushPanel({
        name: Config.panel_names.MY_PAGE_PANEL,
        panelInfo: {
          menuId: myOrder.menuId,
          menuNm: myOrder.menuNm,
          menuOrd: myOrder.menuOrd,
          forceUpdate: true,
        },
      })
    );
  }, [dispatch, myOrder]);

  const handleContinueClick = useCallback(() => {
    dispatch(resetPanels());
    dispatch(popPanel());
  }, [dispatch]);

  return (
    <TPanel
      className={css.confirmPanel}
      isTabActivated={false}
      spotlightId={spotlightId}
      handleCancel={(e) => handleCancel(e)}
    >
      <div className={css.title}>
        <h2>{$L("THANK YOU.")}</h2>
        <h2>{$L("Your Order Has Been Placed")}</h2>
      </div>
      {panelInfo && (
        <div className={css.contentsBox}>
          <div className={css.topContents}>
            <p className={css.topContentsTitle}>{$L("ESTIMATED DELEVERY")}</p>
            <span className={css.topContentsDesc}>{dlvrDate}</span>
          </div>
          <ul className={css.midContents}>
            <li>
              <p>{$L("ORDER NUMBER")}</p>
              <span>{expsOrdNo}</span>
            </li>
            <li>
              <p className={css.shippingAddressTitle}>
                {$L("SHIPPING ADDRESS")}
              </p>
              <span>
                {dlvrCityNm}
                <br />
                {dlvrDtlAddr}
                <br />
                {dlvrZpcd}
              </span>
            </li>
            <li>
              <p>{$L("FULL NAME")}</p>
              <span>
                {dlvrOdrFnm} {dlvrOdrLnm}
              </span>
            </li>
            <li>
              <p>{$L("PHONE NUMBER")}</p>
              <span>{dlvrCtpt}</span>
            </li>
            <li>
              <p>{$L("EMAIL")}</p>
              <span>{dlvrEmalAddr}</span>
            </li>
          </ul>
          <div className={css.bottomContents}>
            <p className={css.bottomContentsTitle}>{$L("ESTIMATED TOTAL")}</p>
            <span className={css.bottomContentsDesc}>
              {formatCurrencyValue(realTotAmt, currSign, currSignLoc)} (
              {cardKnd})
              {auctProdYn && auctProdYn === "Y" && !auctFinalPriceChgDt && (
                <span className={css.noticeBox}>
                  {$L("Purchased products will be paid at the final price.")}
                </span>
              )}
            </span>
          </div>
          <CustomImage
            src={confirmCardImage}
            alt="confirmCardImage"
            className={css.img}
          />
        </div>
      )}
      <div className={css.buttonWrap}>
        <TButton onClick={handleReviewClick} className={css.firstButton}>
          {$L("REVIEW ORDER")}
        </TButton>
        <TButton onClick={handleContinueClick}>
          {$L("CONTINUE SHOPPING")}
        </TButton>
      </div>
    </TPanel>
  );
}
