import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";

import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import { clearSMS } from "../../actions/appDataActions";
import {
  alertToast,
  changeAppStatus,
  setHidePopup,
  setShowPopup,
} from "../../actions/commonActions";
import {
  clearGetProductCouponDownload,
  getProductCouponDownload,
} from "../../actions/couponActions";
import { setEventIssueReq } from "../../actions/eventActions";
import { getThemeCurationInfo } from "../../actions/homeActions";
import {
  sendLogCuration,
  sendLogGNB,
  sendLogShopByMobile,
  sendLogTotalRecommend,
} from "../../actions/logActions";
import {
  popPanel,
  pushPanel,
  resetPanels,
  updatePanel,
} from "../../actions/panelActions";
import {
  finishVideoPreview,
  startVideoPlayer,
} from "../../actions/playActions";
import MobileSendPopUp from "../../components/MobileSend/MobileSendPopUp";
import TBody from "../../components/TBody/TBody";
import TButton, { TYPES } from "../../components/TButton/TButton";
import TPanel from "../../components/TPanel/TPanel";
import usePrevious from "../../hooks/usePrevious";
import useScrollTo from "../../hooks/useScrollTo";
import { launchMembershipApp } from "../../lunaSend";
import * as Config from "../../utils/Config";
import { LOG_TP_NO, panel_names } from "../../utils/Config";
import { $L, formatLocalDateTime } from "../../utils/helperMethods";
import { SpotlightIds } from "../../utils/SpotlightIds";
import css from "./HotPicks.module.less";
import NoDataType from "./Type/NoDataType/NoDataType";
import TCFI from "./Type/TCFI/TCFI";
import TCFI_2 from "./Type/TCFI_2/TCFI_2";
import TCFI_3 from "./Type/TCFI_3/TCFI_3";
import TCFI_4 from "./Type/TCFI_4/TCFI_4";
import TCFV from "./Type/TCFV/TCFV";
import TCFV_2 from "./Type/TCFV_2/TCFV_2";
import TCFV_3 from "./Type/TCFV_3/TCFV_3";
import TCFV_4 from "./Type/TCFV_4/TCFV_4";
import TCHH from "./Type/TCHH/TCHH";

const SpottableComponent = Spottable("button");

const Container = SpotlightContainerDecorator(
  {
    enterTo: "last-focused",
    leaveFor: { right: "", bottom: "" },
    preserveId: true,
  },
  "div"
);

const getShopTpNm = (evntTpCd) => {
  switch (evntTpCd) {
    case "EVT00102":
      return "coupon";
    case "EVT00104":
      return "prizeevent";
    default:
      return "themesms";
  }
};

const HotPicksPanel = ({ panelInfo, isOnTop, spotlightId }) => {
  const dispatch = useDispatch();

  const scrollJob = useRef(new Job((func) => func(), 0));
  const spotJob = useRef(new Job((func) => func(), 0));

  const themeCurationInfoData = useSelector(
    (state) => state.home?.themeCurationInfoData?.themeInfos
  );
  const themeCurationInfoDataRetCode = useSelector(
    (state) => state.home?.themeCurationInfoDataCode
  );
  const showLoadingPanel = useSelector(
    (state) => state.common.appStatus.showLoadingPanel
  );
  const themeCurationInfoDataRef = usePrevious(themeCurationInfoData);

  const { popupVisible, activePopup } = useSelector(
    (state) => state.common.popup
  );

  const userNumber = useSelector(
    (state) => state.common?.appStatus.loginUserData.userNumber
  );

  const [currentPage, setCurrentPage] = useState(
    panelInfo.currentPage ? panelInfo.currentPage : 0
  );

  const smsRetCode = useSelector((state) => state.appData.sendSms?.retCode);
  const couponDownloadRetCode = useSelector(
    (state) => state.coupon?.couponDownloadSuccess
  );
  const webOSVersion = useSelector(
    (state) => state.common.appStatus?.webOSVersion
  );

  const currentPageRef = usePrevious(currentPage);

  const [scrolling, setScrolling] = useState(false);
  const [popPatnrId, setPopPatnrId] = useState(null);
  const [popCurationId, setPopCurationId] = useState(null);
  const [popEvntId, setPopEvntId] = useState(null);
  const [popEventInfo, setPopEventInfo] = useState(null);
  const [isCurationEvnt, setIsCurationEvnt] = useState(false);
  const [osVersion, setOsVersion] = useState(false);
  const [smsTpCode, setSmsTpCode] = useState(null);
  const [loading, setLoading] = useState(true);

  const shopByMobileLogRef = useRef(null);
  const spotYoffsetRef = useRef(0);

  const currentCurationId = useRef(null);
  const oneLog = useRef(false);

  let timerRef = useRef();

  const _onScroll = (e) => {
    spotYoffsetRef.current = e.scrollTop;
    const targetY = currentPageRef.current * window.innerHeight;
    if (
      targetY !== e.scrollTop &&
      currentPage === currentPageRef.current &&
      currentPage !== themeCurationInfoData?.length - 1
    ) {
      scrollJob.current.start(() => {
        scrollToRef.current({
          position: { y: currentPageRef.current * window.innerHeight },
          animate: false,
        });
      });
    }
    setScrolling(true);
  };
  const _onScrollStop = useCallback(() => {
    setScrolling(false);
  }, []);

  const onFocus = useCallback(() => {
    const { curationId, curationNm, expsOrd } =
      themeCurationInfoData[currentPage];

    if (curationId !== currentCurationId.current) {
      const params = {
        contextName: Config.LOG_CONTEXT_NAME.HOT_PICKS,
        messageId: Config.LOG_MESSAGE_ID.HOTPICKS_SHOWN,
        curationId: curationId,
        curationTitle: curationNm,
        location: expsOrd,
      };
      dispatch(sendLogTotalRecommend(params));

      currentCurationId.current = curationId;
    }
  }, [themeCurationInfoData, currentPage, currentCurationId]);

  const themeCurationType = useCallback(
    (
      data,
      templateCode,
      showEffectiveFlag,
      smsBtnExpsFlag,
      eventInfoV2,
      curationId,
      curationNm,
      expsOrd,
      index
    ) => {
      const sendLogClick = () => {
        const params = {
          contextName: Config.LOG_CONTEXT_NAME.HOT_PICKS,
          messageId: Config.LOG_MESSAGE_ID.HOTPICKS_CLICK,
          curationId: curationId,
          curationTitle: curationNm,
          location: expsOrd,
        };

        dispatch(sendLogTotalRecommend(params));
      };

      let itemData = [];
      itemData.push(JSON.parse(JSON.stringify(data)));

      let Component = null;
      switch (templateCode) {
        case "TCFI": // Full Image
          Component = TCFI;
          break;
        case "TCHH": // Half Image X2
          Component = TCHH;
          break;
        case "TCFI_2": // Full Image + Item(2)
          Component = TCFI_2;
          break;
        case "TCFI_3": // Full Image + Item(3)
          Component = TCFI_3;
          break;
        case "TCFI_4": // Full Image + Item(4)
          Component = TCFI_4;
          break;
        case "TCFV": // Full Image + VOD
          showEffectiveFlag !== "Y" ? (Component = TCFI) : (Component = TCFV);
          break;
        case "TCFV_2": // Full Image + VOD + Item(2)
          showEffectiveFlag !== "Y"
            ? (Component = TCFI_2)
            : (Component = TCFV_2);
          break;
        case "TCFV_3": // Full Image + VOD + Item(3)
          showEffectiveFlag !== "Y"
            ? (Component = TCFI_3)
            : (Component = TCFV_3);
          break;
        case "TCFV_4": // Full Image + VOD + Item(4)
          showEffectiveFlag !== "Y"
            ? (Component = TCFI_4)
            : (Component = TCFV_4);

          break;
      }
      if (Component) {
        return (
          <Component
            key={index}
            data={itemData}
            orders={index + 1}
            onSpotlightDown={(ev) => onItemSpotlightDown(ev)}
            onSpotlightUp={(ev) => onItemSpotlightUp(ev)}
            currentPage={currentPage}
            mobilePop={smsBtnExpsFlag}
            changePop={(patnrId, curationId, evntId, evntTpCd, eventInfoV2) =>
              handlePopupOpen(
                patnrId,
                curationId,
                evntId,
                evntTpCd,
                eventInfoV2
              )
            }
            eventInfo={eventInfoV2}
            osVersion={osVersion}
            scrolling={scrolling}
            sendLogClick={sendLogClick}
          />
        );
      }
      return null;
    },
    [
      onItemSpotlightDown,
      onItemSpotlightUp,
      currentPage,
      handlePopupOpen,
      scrolling,
      osVersion,
    ]
  );

  const handleTopButtonClick = () => {
    setCurrentPage(0);
    oneLog.current = false;
  };

  const components = useMemo(() => {
    let comps = [];

    if (themeCurationInfoData) {
      comps = themeCurationInfoData.map((item, index) =>
        themeCurationType(
          item,
          item.tmpltCd,
          item.showEffectiveFlag,
          item.smsBtnExpsFlag,
          item.eventInfoV2,
          item.curationId,
          item.curationNm,
          item.expsOrd,
          index
        )
      );
    }
    return comps;
  }, [themeCurationInfoData, themeCurationType]);

  useEffect(() => {
    dispatch(sendLogGNB(Config.LOG_MENU.HOT_PICKS));
    return () => {
      timerRef.current && clearTimeout(timerRef.current);
    };
  }, []);

  useEffect(() => {
    if (components.length <= 0) {
      dispatch(
        changeAppStatus({ showLoadingPanel: { show: true, type: "wait" } })
      );
    }
    dispatch(getThemeCurationInfo());
  }, [dispatch]);

  useEffect(() => {
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      setLoading(showLoadingPanel.show);
    }, 100);
  }, [dispatch, showLoadingPanel]);

  useEffect(() => {
    if (
      themeCurationInfoData &&
      panelInfo?.currentPage === undefined &&
      !panelInfo?.currentSpot
    ) {
      const { curationId, patnrId } = panelInfo;

      if (curationId && themeCurationInfoData.length > 0) {
        const matchFilter = (item) =>
          item.curationId === curationId &&
          (!patnrId || item.patnrId === patnrId);

        const matchData = themeCurationInfoData.filter(matchFilter);

        const lastIndexInReversed = [...themeCurationInfoData]
          .reverse()
          .findIndex(matchFilter);

        const lastIndex =
          lastIndexInReversed !== -1
            ? themeCurationInfoData.length - 1 - lastIndexInReversed
            : -1;

        setCurrentPage(matchData.length > 0 ? lastIndex : 0);
      }
    }
  }, [
    panelInfo,
    panelInfo.currentPage,
    panelInfo.currentSpot,
    themeCurationInfoData,
  ]);

  useEffect(() => {
    let props = { logTpNo: LOG_TP_NO.CURATION.HOT_PICKS };
    let saveCuration = null;
    let savePatnrId = null;
    let timer;
    if (themeCurationInfoData && currentPage) {
      const { curationId, curationNm, expsOrd, patncNm, patnrId } =
        themeCurationInfoData[currentPage];

      if (panelInfo?.linkTpCd) {
        //딥링크 탈때
        let matchData = themeCurationInfoData.filter(
          (item) =>
            item.curationId === panelInfo.curationId &&
            item.patnrId === panelInfo.patnrId
        );

        if (matchData.length > 0) {
          props = {
            ...props,
            linkTpCd: panelInfo.linkTpCd,
            curationId: matchData[0].curationId,
            patnrId: matchData[0].patnrId,
            curationNm: matchData[0].curationNm,
            expsOrd: String(matchData[0].expsOrd),
            patncNm: matchData[0].patncNm,
          };

          saveCuration = panelInfo.curationId;
          savePatnrId = panelInfo.patnrId;
        } else {
          props = {
            ...props,
            curationId: curationId,
            curationNm: curationNm,
            expsOrd: String(expsOrd),
            patncNm: patncNm,
            patnrId: patnrId,
          };
        }
      } else {
        //딥링크 안탈때
        props = {
          ...props,
          curationId: curationId,
          curationNm: curationNm,
          expsOrd: String(expsOrd),
          patncNm: patncNm,
          patnrId: patnrId,
        };
      }

      if (!oneLog.current) {
        // if (expsOrdRef.current !== expsOrd) {
        timer = setTimeout(() => {
          oneLog.current = true;
          dispatch(sendLogCuration(props));
          // expsOrdRef.current = expsOrd;
        }, 3000);

        return () => clearTimeout(timer);
        // }
      }

      if (panelInfo?.linkTpCd) {
        dispatch(
          updatePanel({
            name: panel_names.HOT_PICKS_PANEL,
            panelInfo: {
              curationId: saveCuration,
              linkTpCd: null,
              patnrId: savePatnrId,
            },
          })
        );
      }
    }
  }, [
    themeCurationInfoData,
    currentPage,
    panelInfo?.curationId,
    panelInfo?.linkTpCd,
    panelInfo?.patnrId,
    dispatch,
  ]);

  const onItemSpotlightDown = useCallback((ev) => {
    if (currentPageRef.current < themeCurationInfoDataRef.current?.length - 1) {
      Spotlight.focus("hotpicks-next-arrow");
    }
    if (
      currentPageRef.current ===
      themeCurationInfoDataRef.current?.length - 1
    ) {
      Spotlight.focus("hotpicks-top-button");
    }
  }, []);

  const onItemSpotlightUp = useCallback((ev) => {
    if (currentPageRef.current > 0) {
      Spotlight.focus("hotpicks-prev-arrow");
    }
  }, []);

  const handlePop = useCallback(() => {
    dispatch(setHidePopup());
    setTimeout(() => {
      Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
    });
  }, [dispatch, currentPage]);

  const handleLogin = useCallback(() => {
    dispatch(setHidePopup());
    dispatch(launchMembershipApp());
  }, [dispatch]);

  useEffect(() => {
    if (webOSVersion && Number(webOSVersion) >= 6) {
      setOsVersion(true);
    }
  }, [webOSVersion]);

  useEffect(() => {
    if (activePopup !== "hotPicksSmsPopup") {
      setSmsTpCode("");
      setIsCurationEvnt(false);
      setPopPatnrId(null);
      setPopCurationId(null);
      setPopEvntId(null);
      setPopEventInfo(null);
    }
  }, [activePopup]);

  const handlePopupOpen = useCallback(
    (patnrId, curationId, evntId, evntTpCd, eventInfoV2) => {
      //coupon
      if (eventInfoV2 && eventInfoV2.evntTpCd === "EVT00102") {
        setIsCurationEvnt(true);
        setPopPatnrId(patnrId);
        setPopCurationId(curationId);
        setPopEvntId(evntId);
        setPopEventInfo(eventInfoV2);
        dispatch(setShowPopup(Config.ACTIVE_POPUP.hotPicksSmsPopup));
      }

      if (
        eventInfoV2 &&
        eventInfoV2.evntTpCd === "EVT00107" &&
        webOSVersion &&
        Number(webOSVersion) >= 6
      ) {
        if (!userNumber) {
          dispatch(setShowPopup(Config.ACTIVE_POPUP.loginPopup));
        } else {
          dispatch(
            getProductCouponDownload({
              mbrNo: userNumber,
              cpnSno: eventInfoV2.billCpnSno,
            })
          );
        }
      }

      // prizeevent
      if (eventInfoV2 && eventInfoV2.evntTpCd === "EVT00104") {
        setSmsTpCode("APP00211");
        setPopPatnrId(patnrId);
        setPopCurationId(curationId);
        setPopEvntId(evntId);
        setPopEventInfo(eventInfoV2);
        dispatch(setShowPopup(Config.ACTIVE_POPUP.hotPicksSmsPopup));
      }

      // themesms
      if (!eventInfoV2) {
        setSmsTpCode("APP00204");
        setPopCurationId(curationId);
        setPopPatnrId(patnrId);
        dispatch(setShowPopup(Config.ACTIVE_POPUP.hotPicksSmsPopup));
      }

      const params = {
        befPrice: "",
        curationId: themeCurationInfoData[currentPage].curationId,
        curationNm: themeCurationInfoData[currentPage].curationNm,
        evntId: evntId ?? "",
        evntNm: evntTpCd ?? "",
        lastPrice: "",
        lgCatCd: themeCurationInfoData[currentPage].lgCatCd ?? "",
        lgCatNm: "",
        liveFlag: "N",
        locDt: formatLocalDateTime(new Date()),
        logTpNo: Config.LOG_TP_NO.SHOP_BY_MOBILE.SHOP_BY_MOBILE,
        mbphNoFlag: "N",
        patncNm: themeCurationInfoData[currentPage].patncNm,
        patnrId: themeCurationInfoData[currentPage].patnrId,
        prdtId: "",
        prdtNm: "",
        revwGrd: "",
        rewdAplyFlag: "N",
        shopByMobileFlag: "Y",
        shopTpNm: getShopTpNm(eventInfoV2?.evntTpCd),
        showId: themeCurationInfoData[currentPage].showId ?? "",
        showNm: themeCurationInfoData[currentPage].showNm ?? "",
        trmsAgrFlag: "N",
        tsvFlag: themeCurationInfoData[currentPage].todaySpclFlag || "N",
      };

      dispatch(sendLogShopByMobile(params));
      shopByMobileLogRef.current = params;
    },
    [currentPage, themeCurationInfoData]
  );

  const { getScrollTo, scrollToRef } = useScrollTo();

  const handleNext = useCallback(() => {
    oneLog.current = false;
    setCurrentPage((prev) => prev + 1);
  }, []);

  const handlePrev = useCallback(() => {
    oneLog.current = false;
    setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
  }, []);

  useEffect(() => {
    const spotJobValue = spotJob.current;
    const scrollJobValue = scrollJob.current;
    if (typeof window === "object" && scrollToRef.current) {
      dispatch(finishVideoPreview());
      spotJobValue.stop();

      scrollJobValue.start(() => {
        scrollToRef.current({
          position: { y: currentPage * window.innerHeight },
          animate: false,
        });
      });

      if (themeCurationInfoDataRetCode === 0) {
        if (panelInfo?.currentSpot) {
          spotJobValue.start(() => {
            Spotlight.focus(panelInfo?.currentSpot);
          });
          dispatch(
            updatePanel({
              name: panel_names.HOT_PICKS_PANEL,
              panelInfo: {
                currentSpot: "",
              },
            })
          );
        } else {
          scrollJobValue.start(() => {
            scrollToRef.current({
              position: { y: currentPage * window.innerHeight },
              animate: false,
            });
          });
          spotJobValue.start(() => {
            Spotlight.focus("hotpicks-data-spot" + (currentPage * 1 + 1));
          });
        }
      }
    }
    return () => {
      spotJobValue.stop();
      scrollJobValue.stop();
    };
  }, [currentPage, themeCurationInfoDataRetCode]);

  const handleWheel = (e) => {
    let deltaY = e.deltaY;
    if (deltaY > 0 && currentPage < themeCurationInfoData.length - 1) {
      deltaY = 0;
      handleNext();
    } else if (deltaY < 0 && currentPage > 0) {
      deltaY = 0;
      handlePrev();
    }
  };

  useEffect(() => {
    const _currrentPage = panelInfo.currentPage;

    if (_currrentPage >= 0) {
      setCurrentPage(_currrentPage);
    }

    return () => {
      const c = Spotlight.getCurrent();
      let targetSpotlightId = null;
      if (c) {
        targetSpotlightId = c.getAttribute("data-spotlight-id");
      }
      dispatch(
        updatePanel({
          name: panel_names.HOT_PICKS_PANEL,
          panelInfo: {
            currentPage: currentPageRef.current,
            currentSpot: targetSpotlightId,
          },
        })
      );
    };
  }, [dispatch, panelInfo.currentPage]);

  const shopLinkInfo = useMemo(() => {
    if (themeCurationInfoData && currentPage) {
      return themeCurationInfoData[currentPage]?.eventInfoV2?.shptmLnkInfo;
    }
    return;
  }, [themeCurationInfoData, currentPage]);

  const navigateToLinkByTypeCode = useCallback(() => {
    if (shopLinkInfo) {
      switch (shopLinkInfo.shptmLnkTpCd) {
        case "EVT00201":
          break;
        case "EVT00202":
          dispatch(
            pushPanel({
              name: panel_names.FEATURED_BRANDS_PANEL,
              panelInfo: { from: "gnb", patnrId: shopLinkInfo?.lnkPatnrId },
            })
          );
          break;
        case "EVT00203":
          dispatch(pushPanel({ name: panel_names.TRENDING_NOW_PANEL }));
          break;
        case "EVT00204":
          pushPanel({
            name: panel_names.HOT_PICKS_PANEL,
            panelInfo: {
              curationId: shopLinkInfo?.lnkCurationId,
              patnrId: shopLinkInfo?.lnkPatnrId,
            },
          });
          break;
        case "EVT00205":
          dispatch(
            pushPanel({
              name: panel_names.ON_SALE_PANEL,
              panelInfo: { lgCatCd: shopLinkInfo?.lnkLgCatCd },
            })
          );
          break;
        case "EVT00206":
          dispatch(
            pushPanel({
              name: panel_names.CATEGORY_PANEL,
              panelInfo: {
                lgCatCd: shopLinkInfo?.lnkLgCatCd,
              },
            })
          );
          break;
        case "EVT00207":
          dispatch(
            pushPanel({
              name: panel_names.DETAIL_PANEL,
              panelInfo: {
                patnrId: shopLinkInfo?.lnkPatnrId,
                prdtId: shopLinkInfo?.lnkPrdtId,
              },
            })
          );
          break;
        case "EVT00208":
          dispatch(
            startVideoPlayer({
              modal: false,
              patnrId: shopLinkInfo?.lnkPatnrId,
              showId: shopLinkInfo?.lnkBrdcId,
              shptmBanrTpNm: "VOD",
            })
          );
          break;
        case "EVT00209":
          dispatch(
            pushPanel({
              name: panel_names.THEME_CURATION_PANEL,
              panelInfo: {
                curationId: shopLinkInfo?.lnkCurationId,
              },
            })
          );
          break;
        case "EVT00210":
          dispatch(
            pushPanel({
              name: panel_names.MY_PAGE_PANEL,
              panelInfo: { menuNm: "My Info", menuOrd: 3 },
            })
          );
          break;
      }
    } else return;
  }, [themeCurationInfoData, currentPage, dispatch, shopLinkInfo]);

  useEffect(() => {
    if (smsRetCode === 0) {
      if (shopLinkInfo?.shptmLnkTpCd) {
        setTimeout(() => {
          dispatch(popPanel(Config.panel_names.HOT_PICKS_PANEL));
          navigateToLinkByTypeCode();
        }, 3000);
      } else return;
    }
    return;
  }, [smsRetCode, shopLinkInfo]);

  useEffect(() => {
    if (couponDownloadRetCode === 0) {
      dispatch(alertToast($L("Downloading coupon complete.")));
      if (shopLinkInfo?.shptmLnkTpCd) {
        dispatch(popPanel(Config.panel_names.HOT_PICKS_PANEL));
        navigateToLinkByTypeCode();
      } else return;
    }
    return;
  }, [couponDownloadRetCode, shopLinkInfo]);

  useEffect(() => {
    return () => {
      dispatch(clearSMS);
      dispatch(clearGetProductCouponDownload());
    };
  }, [dispatch]);

  const onSpotlightUp = (ev) => {
    ev.stopPropagation();
    ev.preventDefault();
    handlePrev();
  };
  const onSpotlightDown = (ev) => {
    ev.stopPropagation();
    ev.preventDefault();
    handleNext();
  };

  const handleCancel = useCallback(() => {
    dispatch(finishVideoPreview());
    dispatch(popPanel(panel_names.HOT_PICKS_PANEL));
  }, [dispatch]);

  return (
    <TPanel
      className={css.tPanel}
      spotlightId={spotlightId}
      handleCancel={handleCancel}
    >
      {currentPage > 0 && (
        <p className={classNames(css.arrow, css.arrowPrev)}>
          <SpottableComponent
            spotlightId={"hotpicks-prev-arrow"}
            onClick={handlePrev}
            onSpotlightUp={onSpotlightUp}
            aria-label="Move to up button"
            role=""
          >
            이전
          </SpottableComponent>
        </p>
      )}
      <TBody
        className={css.hotPicks}
        cbScrollTo={getScrollTo}
        onWheel={handleWheel}
        onScroll={_onScroll}
        onScrollStop={_onScrollStop}
        scrollOptions={{ noScrollByWheel: true }}
        spotlightDisabled={!isOnTop}
      >
        {components.length > 0
          ? components.map((component, index) => (
              <Container
                key={index}
                className={css.sectionWrap}
                onFocus={onFocus}
              >
                {currentPage === index && component}
              </Container>
            ))
          : !loading && <NoDataType />}
      </TBody>

      {currentPage < themeCurationInfoData?.length - 1 && (
        <p className={classNames(css.arrow, css.arrowNext)}>
          <SpottableComponent
            spotlightId={"hotpicks-next-arrow"}
            onClick={handleNext}
            onSpotlightDown={onSpotlightDown}
            aria-label="Move to down button"
            role=""
          >
            다음
          </SpottableComponent>
        </p>
      )}
      {currentPage === themeCurationInfoData?.length - 1 && (
        <TButton
          className={css.tButton}
          onClick={handleTopButtonClick}
          size={null}
          spotlightId="hotpicks-top-button"
          type={TYPES.topButton}
        />
      )}
      {activePopup === Config.ACTIVE_POPUP.hotPicksSmsPopup && (
        <MobileSendPopUp
          open={popupVisible}
          onClose={handlePop}
          title={$L("Send To Mobile")}
          subTitle={$L(
            "Enter your mobile number to receive detailed information via SMS"
          )}
          patnrId={popPatnrId}
          curationId={popCurationId}
          evntId={popEvntId}
          evntTpCd={themeCurationInfoData[currentPage]?.eventInfoV2?.evntTpCd}
          smsTpCd={smsTpCode}
          data={themeCurationInfoData[currentPage]}
          isCurationEvnt={isCurationEvnt}
          shopByMobileLogRef={shopByMobileLogRef}
        />
      )}
      {activePopup === Config.ACTIVE_POPUP.loginPopup && (
        <TPopUp
          kind="textPopup"
          hasText
          open={popupVisible}
          text={$L("Would you like to sign in?")}
          hasButton
          button1Text={$L("OK")}
          button2Text={$L("CANCEL")}
          onClick={handleLogin}
          onClose={handlePop}
        />
      )}
    </TPanel>
  );
};

const propsAreEqual = (prev, next) => {
  const keys = Object.keys(prev);
  const nextKeys = Object.keys(next);
  if (!next.isOnTop) {
    //ignore event on background
    return true;
  }
  if (keys.length !== nextKeys.length) {
    return false;
  }
  for (let i = 0; i < keys.length; i++) {
    if (prev[keys[i]] !== next[keys[i]]) {
      return false;
    }
  }
  return true;
};

export default React.memo(HotPicksPanel, propsAreEqual);
