shoptime/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx

// src/views/DetailPanel/DetailPanel.new.jsx
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';

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

import Spotlight from '@enact/spotlight';
import { setContainerLastFocusedElement } from '@enact/spotlight/src/container';

import { getDeviceAdditionInfo } from '../../actions/deviceActions';
import { getThemeCurationDetailInfo } from '../../actions/homeActions';
import { getMainCategoryDetail, getMainYouMayLike } from '../../actions/mainActions';
import { finishModalMediaForce } from '../../actions/mediaActions';
import { popPanel, updatePanel } from '../../actions/panelActions';
import {
  finishVideoPreview,
  pauseFullscreenVideo,
  resumeFullscreenVideo,
} from '../../actions/playActions';
import { clearProductDetail, getProductOptionId } from '../../actions/productActions';
import { clearAllToasts } from '../../actions/toastActions';
import TBody from '../../components/TBody/TBody';
import TPanel from '../../components/TPanel/TPanel';
import { panel_names } from '../../utils/Config';
import fp from '../../utils/fp';
import { SpotlightIds } from '../../utils/SpotlightIds';
import DetailPanelBackground from './components/DetailPanelBackground';
import THeaderCustom from './components/THeaderCustom';
import css from './DetailPanel.module.less';
import ProductAllSection from './ProductAllSection/ProductAllSection';
import ThemeItemListOverlay from './ThemeItemListOverlay/ThemeItemListOverlay';

export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
  const dispatch = useDispatch();

  const productData = useSelector((state) => state.main.productData);
  const youmaylikeData = useSelector((state) => state.main.youmaylikeData);
  const themeProductInfos = useSelector((state) => state.home.themeCurationDetailInfoData);
  const isLoading = useSelector((state) =>
    fp.pipe(() => state, fp.get('common.appStatus.showLoadingPanel.show'))()
  );
  const themeData = useSelector((state) =>
    fp.pipe(
      () => state,
      fp.get('home.productData.themeInfo'),
      (list) => list && list[0]
    )()
  );
  const webOSVersion = useSelector((state) => state.common.appStatus.webOSVersion);
  const panels = useSelector((state) => state.panels.panels);

  const [selectedIndex, setSelectedIndex] = useState(0);
  const [lgCatCd, setLgCatCd] = useState('');
  const [themeProductInfo, setThemeProductInfo] = useState(null);

  const containerRef = useRef(null);

  const panelType = useMemo(() => fp.pipe(() => panelInfo, fp.get('type'))(), [panelInfo]);
  const panelCurationId = useMemo(
    () => fp.pipe(() => panelInfo, fp.get('curationId'))(),
    [panelInfo]
  );
  const panelPatnrId = useMemo(() => fp.pipe(() => panelInfo, fp.get('patnrId'))(), [panelInfo]);
  const panelPrdtId = useMemo(() => fp.pipe(() => panelInfo, fp.get('prdtId'))(), [panelInfo]);
  const panelLiveReqFlag = useMemo(
    () => fp.pipe(() => panelInfo, fp.get('liveReqFlag'))(),
    [panelInfo]
  );
  const panelBgImgNo = useMemo(() => fp.pipe(() => panelInfo, fp.get('bgImgNo'))(), [panelInfo]);
  const panelLaunchedFromPlayer = useMemo(
    () => fp.pipe(() => panelInfo, fp.get('launchedFromPlayer'))(),
    [panelInfo]
  );
  const panelLaunchedFromUserReviewPanel = useMemo(
    () => fp.pipe(() => panelInfo, fp.get('launchedFromUserReviewPanel'), fp.defaultTo(false))(),
    [panelInfo]
  );
  const panelBgVideoInfo = useMemo(
    () => fp.pipe(() => panelInfo, fp.get('bgVideoInfo'), fp.defaultTo(null))(),
    [panelInfo]
  );
  const panelShouldReload = useMemo(
    () => fp.pipe(() => panelInfo, fp.get('shouldReload'), fp.defaultTo(false))(),
    [panelInfo]
  );
  const productPmtSuptYn = useMemo(
    () => fp.pipe(() => productData, fp.get('pmtSuptYn'))(),
    [productData]
  );
  const productGrPrdtProcYn = useMemo(
    () => fp.pipe(() => productData, fp.get('grPrdtProcYn'))(),
    [productData]
  );

  const productDataSource = useMemo(
    () =>
      fp.pipe(
        () => panelType,
        (type) => (type === 'theme' ? themeData : productData)
      )(),
    [panelType, themeData, productData]
  );

  const [productType, setProductType] = useState(null);
  const [openThemeItemOverlay, setOpenThemeItemOverlay] = useState(false);

  const [scrollToSection, setScrollToSection] = useState(null);
  const [pendingScrollSection, setPendingScrollSection] = useState(null);
  const updateSelectedIndex = useCallback((newIndex) => {
    setSelectedIndex(
      fp.pipe(
        () => newIndex,
        (index) => Math.max(0, Math.min(index, 999)) // 범위 제한
      )()
    );
  }, []);

  const updateThemeItemOverlay = useCallback((isOpen) => {
    setOpenThemeItemOverlay(fp.pipe(() => isOpen, Boolean)());
  }, []);

  const onSpotlightUpTButton = useCallback((e) => {
    e.stopPropagation();
    Spotlight.focus('spotlightId_backBtn');
  }, []);

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

  const onBackClick = useCallback(
    (isCancelClick) => (ev) => {
      fp.pipe(
        () => {
          dispatch(clearAllToasts()); // BuyOption Toast 포함 모든 토스트 제거
          dispatch(pauseFullscreenVideo()); // PLAYER_PANEL 비디오 중지
          dispatch(finishModalMediaForce()); // MEDIA_PANEL(ProductVideo) 강제 종료
          dispatch(finishVideoPreview());
          dispatch(popPanel(panel_names.DETAIL_PANEL));
        },
        () => {
          // 패널 업데이트 조건 체크
          const shouldUpdatePanel =
            fp.pipe(
              () => panels,
              fp.get('length'),
              (length) => length === 4
            )() &&
            fp.pipe(
              () => panels,
              fp.get('1.name'),
              (name) => name === panel_names.PLAYER_PANEL
            )();

          if (shouldUpdatePanel) {
            dispatch(
              updatePanel({
                name: panel_names.PLAYER_PANEL,
                panelInfo: {
                  thumbnail: fp.pipe(() => panelInfo, fp.get('thumbnailUrl'))(),
                },
              })
            );
          }
          // PlayerPanel의 isOnTop useEffect가 자동으로 오버레이 표시
        }
      )();

      if (isCancelClick) {
        ev.stopPropagation();
      }
    },
    [dispatch, panelInfo, panels]
  );

  const onBackButtonFocus = useCallback(() => {
    dispatch(clearAllToasts());
  }, [dispatch]);

  const handleScrollToSection = useCallback(
    (sectionId) => {
      console.log('DetailPanel: handleScrollToSection called with:', sectionId);
      console.log('DetailPanel: scrollToSection function:', scrollToSection);

      const scrollAction = fp.pipe(
        () => ({ scrollToSection, sectionId }),
        ({ scrollToSection, sectionId }) => {
          if (fp.isNotNil(scrollToSection)) {
            return {
              action: 'execute',
              scrollFunction: scrollToSection,
              sectionId,
            };
          } else {
            return { action: 'store', sectionId };
          }
        }
      )();

      // 액션에 따른 처리
      if (scrollAction.action === 'execute') {
        scrollAction.scrollFunction(scrollAction.sectionId);
      } else {
        console.log('DetailPanel: scrollToSection function is null, storing pending scroll');
        setPendingScrollSection(scrollAction.sectionId);
      }
    },
    [scrollToSection]
  );

  // ===== 배경 이미지 설정 (컴포넌트로 구현되어 useEffect 불필요) =====
  // DetailPanelBackground 컴포넌트로 배경 렌더링

  useEffect(() => {
    const shouldExecutePendingScroll = fp.pipe(
      () => ({ scrollToSection, pendingScrollSection }),
      ({ scrollToSection, pendingScrollSection }) =>
        fp.isNotNil(scrollToSection) && fp.isNotNil(pendingScrollSection)
    )();

    if (shouldExecutePendingScroll) {
      console.log('DetailPanel: executing pending scroll to:', pendingScrollSection);

      // 메모리 누수 방지를 위한 cleanup 함수
      const timeoutId = setTimeout(() => {
        if (scrollToSection) {
          scrollToSection(pendingScrollSection);
        }
        setPendingScrollSection(null);
      }, 100);

      // cleanup 함수 반환으로 메모리 누수 방지
      return () => {
        clearTimeout(timeoutId);
      };
    }
  }, [scrollToSection, pendingScrollSection]);

  useEffect(() => {
    const loadInitialData = fp.pipe(
      () => {
        // 기본 액션 디스패치
        dispatch(getProductOptionId(undefined));
        dispatch(getDeviceAdditionInfo());
      },
      () => {
        // 테마 데이터 로딩
        const isThemeType = panelType === 'theme';

        if (isThemeType) {
          dispatch(
            getThemeCurationDetailInfo({
              patnrId: panelPatnrId,
              curationId: panelCurationId,
              bgImgNo: panelBgImgNo,
            })
          );
        }
      },
      () => {
        // 일반 상품 데이터 로딩
        const hasProductId = fp.isNotNil(panelPrdtId);
        const hasNoCuration = fp.isNil(panelCurationId);

        if (hasProductId && hasNoCuration) {
          dispatch(
            getMainCategoryDetail({
              patnrId: panelPatnrId,
              prdtId: panelPrdtId,
              liveReqFlag: panelLiveReqFlag || 'N',
            })
          );
        }
      }
    )();

    // cleanup 함수로 메모리 누수 방지
    return () => {
      // 필요한 경우 cleanup 로직 추가
    };
  }, [
    dispatch,
    panelLiveReqFlag,
    panelCurationId,
    panelPrdtId,
    panelType,
    panelPatnrId,
    panelBgImgNo,
  ]);

  useEffect(() => {
    const shouldLoadRecommendations = fp.pipe(() => lgCatCd, fp.isNotEmpty)();

    if (shouldLoadRecommendations) {
      const youMayLikeParams = {
        lgCatCd: lgCatCd,
        exclCurationId: panelInfo?.curationId,
        exclPatnrId: panelInfo?.patnrId,
        exclPrdtId: panelInfo?.prdtId,
        catDpTh3:
          panelInfo?.type === 'theme'
            ? themeProductInfos[selectedIndex]?.catDpTh3
            : productData?.catDpTh3,
        catDpTh4:
          panelInfo?.type === 'theme'
            ? themeProductInfos[selectedIndex]?.catDpTh4
            : productData?.catDpTh4,
      };

      // console.log('[YouMayLike]-youmaylikeData 요청 파라미터:', youMayLikeParams);
      dispatch(getMainYouMayLike(youMayLikeParams));
    }
  }, [panelInfo?.curationId, panelInfo?.patnrId, panelInfo?.prdtId, lgCatCd]);

  const getlgCatCd = useCallback(() => {
    // DetailPanel.backup.jsx와 완전히 동일한 로직
    if (productData && !panelInfo?.curationId) {
      // console.log('[YouMayLike] lgCatCd 설정 (일반상품):', productData.catCd);
      setLgCatCd(productData.catCd);
    } else if (
      themeProductInfos &&
      themeProductInfos[selectedIndex]?.pmtSuptYn === 'N' &&
      panelInfo?.curationId
    ) {
      const themeCatCd = themeProductInfos[selectedIndex]?.catCd;
      // console.log('[YouMayLike] lgCatCd 설정 (테마상품):', themeCatCd);
      setLgCatCd(themeCatCd);
    } else {
      // console.log('[YouMayLike] lgCatCd 설정 (빈값):', {
      //   hasProductData: !!productData,
      //   panelCurationId: panelInfo?.curationId,
      //   hasThemeProductInfos: !!themeProductInfos,
      //   selectedIndex,
      //   themeProductPmtSuptYn: themeProductInfos?.[selectedIndex]?.pmtSuptYn
      // });
      setLgCatCd('');
    }
  }, [productData, themeProductInfos, selectedIndex, panelInfo?.curationId]);

  // 카테고리 코드 업데이트 - DetailPanel.backup.jsx와 동일한 의존성
  useEffect(() => {
    getlgCatCd();
  }, [themeProductInfos, productData, panelInfo, selectedIndex, getlgCatCd]);

  // lgCatCd 변경 추적 로그
  // useEffect(() => {
  //   console.log('[YouMayLike] lgCatCd 변경됨:', {
  //     lgCatCd,
  //     willTriggerYouMayLike: !!lgCatCd
  //   });
  // }, [lgCatCd]);

  // youmaylikeData 변경 추적 로그
  // useEffect(() => {
  //   console.log('[YouMayLike] DetailPanel - youmaylikeData 변경됨:', {
  //     youmaylikeData,
  //     hasData: !!(youmaylikeData && youmaylikeData.length > 0),
  //     dataLength: youmaylikeData?.length || 0
  //   });
  // }, [youmaylikeData]);

  // 최근 본 상품 저장이 필요하면:
  // - 순수 유틸로 빌드/업서트 함수 작성 후, 적절한 useEffect에서 호출하세요.
  //   예) saveRecentItem(panelInfo, selectedIndex)

  useEffect(() => {
    return () => {
      fp.pipe(
        () => {
          dispatch(clearProductDetail());
        },
        () => {
          setContainerLastFocusedElement(null, ['indicator-GridListContainer']);
        }
      )();
    };
  }, [dispatch]);

  // CheckOutPanel에서 돌아올 때 DetailPanel 재시작
  useEffect(() => {
    if (panelShouldReload) {
      console.log('[DetailPanel] Reloading panel data...');

      // 기존 데이터 초기화
      dispatch(clearProductDetail());

      // 데이터 다시 로딩
      const isThemeType = panelType === 'theme';

      if (isThemeType && panelCurationId) {
        dispatch(
          getThemeCurationDetailInfo({
            patnrId: panelPatnrId,
            curationId: panelCurationId,
            bgImgNo: panelBgImgNo,
          })
        );
      } else if (panelPrdtId && !panelCurationId) {
        dispatch(
          getMainCategoryDetail({
            patnrId: panelPatnrId,
            prdtId: panelPrdtId,
            liveReqFlag: panelLiveReqFlag || 'N',
          })
        );
      }

      // 재시작 플래그 제거
      dispatch(
        updatePanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: { shouldReload: false },
        })
      );

      console.log('[DetailPanel] Reload complete');
    }
  }, [
    panelShouldReload,
    dispatch,
    panelType,
    panelPatnrId,
    panelCurationId,
    panelBgImgNo,
    panelPrdtId,
    panelLiveReqFlag,
  ]);

  // 최근 본 상품 트리거 예시:
  // useEffect(() => {
  //   if (panelInfo && panelInfo.patnrId && panelInfo.prdtId) {
  //     // saveRecentItem(panelInfo, selectedIndex)
  //   }
  // }, [panelInfo, selectedIndex])

  const versionComparators = useMemo(
    () => ({
      isVersionGTE: fp.curry((target, version) => version >= target),
      isVersionLT: fp.curry((target, version) => version < target),
    }),
    []
  );

  const conditionCheckers = useMemo(
    () => ({
      hasDataAndCondition: fp.curry((conditionFn, data) => fp.isNotNil(data) && conditionFn(data)),
      equalTo: fp.curry((expected, actual) => actual === expected),
      checkAllConditions: fp.curry((conditions, data) =>
        fp.reduce(
          (acc, condition) => acc && condition,
          true,
          conditions.map((fn) => fn(data))
        )
      ),
    }),
    []
  );

  const getProductType = useCallback(() => {
    const createTypeChecker = fp.curry((type, conditions, sideEffect) =>
      fp.pipe(
        () => conditions(),
        (isValid) =>
          isValid
            ? (() => {
                sideEffect && sideEffect();
                return { matched: true, type };
              })()
            : { matched: false }
      )()
    );

    const productTypeRules = [
      // 테마 타입 체크
      () =>
        createTypeChecker(
          'theme',
          () =>
            fp.pipe(
              () => ({ panelCurationId, themeData }),
              ({ panelCurationId, themeData }) =>
                fp.isNotNil(panelCurationId) && fp.isNotNil(themeData)
            )(),
          () => {
            const themeProduct = fp.pipe(
              () => themeData,
              fp.get('productInfos'),
              fp.get(selectedIndex.toString())
            )();
            setProductType('theme');
            setThemeProductInfo(themeProduct);
          }
        ),

      // Buy Now 타입 체크 (curry 활용)
      () =>
        createTypeChecker(
          'buyNow',
          () =>
            fp.pipe(
              () => ({
                productData,
                panelPrdtId,
                productPmtSuptYn,
                productGrPrdtProcYn,
                webOSVersion,
              }),
              ({
                productData,
                panelPrdtId,
                productPmtSuptYn,
                productGrPrdtProcYn,
                webOSVersion,
              }) => {
                const conditions = [
                  () => fp.isNotNil(productData),
                  () => conditionCheckers.equalTo('Y')(productPmtSuptYn),
                  () => conditionCheckers.equalTo('N')(productGrPrdtProcYn),
                  () => fp.isNotNil(panelPrdtId),
                  () => versionComparators.isVersionGTE('6.0')(webOSVersion),
                ];
                return conditionCheckers.checkAllConditions(conditions)({});
              }
            )(),
          () => setProductType('buyNow')
        ),

      // Shop By Mobile 타입 체크 (curry 활용)
      () =>
        createTypeChecker(
          'shopByMobile',
          () =>
            fp.pipe(
              () => ({
                productData,
                panelPrdtId,
                productPmtSuptYn,
                productGrPrdtProcYn,
                webOSVersion,
              }),
              ({
                productData,
                panelPrdtId,
                productPmtSuptYn,
                productGrPrdtProcYn,
                webOSVersion,
              }) => {
                if (!productData) return false;

                const isDirectMobile = conditionCheckers.equalTo('N')(productPmtSuptYn);
                const conditionalMobileConditions = [
                  () => conditionCheckers.equalTo('Y')(productPmtSuptYn),
                  () => conditionCheckers.equalTo('N')(productGrPrdtProcYn),
                  () => versionComparators.isVersionLT('6.0')(webOSVersion),
                  () => fp.isNotNil(panelPrdtId),
                ];
                const isConditionalMobile = conditionCheckers.checkAllConditions(
                  conditionalMobileConditions
                )({});

                return isDirectMobile || isConditionalMobile;
              }
            )(),
          () => setProductType('shopByMobile')
        ),
    ];

    const matchedRule = fp.reduce(
      (result, rule) => (result.matched ? result : rule()),
      { matched: false },
      productTypeRules
    );

    // 매칭되지 않은 경우 디버깅 정보 출력
    if (!matchedRule.matched) {
      const debugInfo = fp.pipe(
        () => ({
          productData,
          panelPrdtId,
          productPmtSuptYn,
          productGrPrdtProcYn,
          webOSVersion,
        }),
        ({ productData, panelPrdtId, productPmtSuptYn, productGrPrdtProcYn, webOSVersion }) => ({
          pmtSuptYn: productPmtSuptYn,
          grPrdtProcYn: productGrPrdtProcYn,
          prdtId: panelPrdtId,
          webOSVersion,
        })
      )();

      console.warn('Unknown product type:', productData);
      console.warn('Product data properties:', debugInfo);
    }
  }, [
    panelCurationId,
    themeData,
    productPmtSuptYn,
    productGrPrdtProcYn,
    panelPrdtId,
    webOSVersion,
    selectedIndex,
    versionComparators,
    conditionCheckers,
  ]);

  useEffect(() => {
    // productData가 로드된 후에만 getProductType 실행
    if (productData || (panelType === 'theme' && themeData)) {
      getProductType();
    }
  }, [getProductType, productData, themeData, panelType]);

  // themeProductInfo 업데이트 - selectedIndex 변경 시마다 실행
  useEffect(() => {
    if (themeData?.productInfos && selectedIndex !== undefined) {
      const themeProduct = themeData.productInfos[selectedIndex];
      setThemeProductInfo(themeProduct);
    }
  }, [themeData, selectedIndex]);

  // 타이틀과 aria-label 메모이제이션 (성능 최적화)
  const headerTitle = useMemo(
    () =>
      fp.pipe(
        () => ({ panelPrdtId, productData, panelType, themeData }),
        ({ panelPrdtId, productData, panelType, themeData }) => {
          const productTitle = fp.pipe(
            () => ({ panelPrdtId, productData }),
            ({ panelPrdtId, productData }) =>
              fp.isNotNil(panelPrdtId) &&
              fp.pipe(() => productData, fp.get('prdtNm'), fp.isNotNil)()
                ? fp.pipe(() => productData, fp.get('prdtNm'))()
                : null
          )();

          const themeTitle = fp.pipe(
            () => ({ panelType, themeData }),
            ({ panelType, themeData }) =>
              panelType === 'theme' && fp.pipe(() => themeData, fp.get('curationNm'), fp.isNotNil)()
                ? fp.pipe(() => themeData, fp.get('curationNm'))()
                : null
          )();

          return productTitle || themeTitle || '';
        }
      )(),
    [panelPrdtId, productData, panelType, themeData]
  );

  const ariaLabel = useMemo(
    () =>
      fp.pipe(
        () => ({ panelPrdtId, productData }),
        ({ panelPrdtId, productData }) =>
          fp.isNotNil(panelPrdtId) && fp.pipe(() => productData, fp.get('prdtNm'), fp.isNotNil)()
            ? fp.pipe(() => productData, fp.get('prdtNm'))()
            : ''
      )(),
    [panelPrdtId, productData]
  );

  const handleProductAllSectionReady = useCallback(() => {
    const spotTime = setTimeout(() => {
      Spotlight.focus(SpotlightIds.DETAIL_SHOPBYMOBILE);
    }, 100);
    return () => {
      clearTimeout(spotTime);
    };
  }, []);

  // 백그라운드 전체화면 비디오 제어: DetailPanel 진입/퇴장 시
  useEffect(() => {
    // console.log('[BgVideo] DetailPanel mounted - checking panels:', {
    //   panelsCount: panels?.length,
    //   panels: panels?.map(p => ({ name: p.name, modal: p.panelInfo?.modal }))
    // });

    // 전체화면 PlayerPanel(modal=false)이 존재하는지 확인
    const hasFullscreenPlayerPanel = fp.pipe(
      () => panels,
      (panelList) =>
        panelList.some(
          (panel) => panel.name === panel_names.PLAYER_PANEL && !panel.panelInfo?.modal
        )
    )();

    // ProductAllSection에 비디오가 있는지 확인
    const hasProductVideo = fp.pipe(() => productData, fp.get('prdtMediaUrl'), fp.isNotNil)();

    // console.log('[BgVideo] hasFullscreenPlayerPanel:', hasFullscreenPlayerPanel);
    // console.log('[BgVideo] hasProductVideo:', hasProductVideo);

    // 전체화면 PlayerPanel이 있고, 제품에 비디오가 있을 때만 백그라운드 비디오 멈춤
    if (hasFullscreenPlayerPanel && hasProductVideo) {
      // console.log('[BgVideo] DetailPanel - Product has video, dispatching pauseFullscreenVideo()');
      dispatch(pauseFullscreenVideo());
    } else {
      console.log('[BgVideo] DetailPanel - Skipping pause:', {
        reason: !hasFullscreenPlayerPanel ? 'no fullscreen PlayerPanel' : 'no product video',
      });
    }

    return () => {
      // DetailPanel 언마운트 시: 비디오가 있었고 멈췄던 경우만 재생 재개
      // console.log('[BgVideo] DetailPanel unmounting');
      if (hasFullscreenPlayerPanel && hasProductVideo) {
        // console.log('[BgVideo] DetailPanel - Product had video, dispatching resumeFullscreenVideo()');
        dispatch(resumeFullscreenVideo());
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 마운트/언마운트 시에만 실행

  // MediaPanel modal 상태 변화 감지 -> ProductVideo로 포커스 이동
  useEffect(() => {
    const topPanel = panels[panels.length - 1];

    // MediaPanel이 modal=true로 복귀했을 때 포커스를 ProductVideo로 이동
    if (
      topPanel &&
      topPanel.name === panel_names.MEDIA_PANEL &&
      topPanel.panelInfo.modal === true
    ) {
      console.log('[DetailPanel] MediaPanel modal=true detected - focusing ProductVideo');
      const focusTimer = setTimeout(() => {
        Spotlight.focus('product-video-player');
      }, 500);
      return () => clearTimeout(focusTimer);
    }
  }, [panels]);

  return (
    <div ref={containerRef}>
      <DetailPanelBackground launchedFromPlayer={panelLaunchedFromPlayer} />

      <TPanel
        isTabActivated={false}
        className={css.detailPanelWrap}
        handleCancel={onBackClick(true)}
        spotlightId={spotlightId}
      >
        <THeaderCustom
          className={css.header}
          prdtId={productData?.prdtId}
          title={headerTitle}
          onBackButton
          onClick={onBackClick(false)}
          onBackButtonFocus={onBackButtonFocus}
          spotlightDisabled={isLoading}
          onSpotlightUp={onSpotlightUpTButton}
          onSpotlightLeft={onSpotlightUpTButton}
          marqueeDisabled={false}
          ariaLabel={ariaLabel}
          logoImg={productData?.patncLogoPath}
          patnrId={panelPatnrId}
        />
        <TBody
          className={css.tbody}
          scrollable={false}
          spotlightDisabled={isLoading}
          isDefaultContainer
        >
          {useMemo(() => {
            const renderStates = fp.pipe(
              () => ({ isLoading, panelInfo, productDataSource, productType }),
              ({ isLoading, panelInfo, productDataSource, productType }) => {
                const hasRequiredData = fp.pipe(
                  () => [panelInfo, productDataSource, productType],
                  (data) => fp.reduce((acc, item) => acc && fp.isNotNil(item), true, data)
                )();

                return {
                  canRender: !isLoading && hasRequiredData,
                  showLoading: !isLoading && !hasRequiredData,
                  showNothing: isLoading,
                };
              }
            )();

            if (renderStates.canRender) {
              return (
                <ProductAllSection
                  productType={productType}
                  productInfo={productDataSource}
                  panelInfo={panelInfo}
                  selectedIndex={selectedIndex}
                  selectedPatnrId={panelPatnrId}
                  selectedPrdtId={panelPrdtId}
                  setSelectedIndex={updateSelectedIndex}
                  openThemeItemOverlay={openThemeItemOverlay}
                  setOpenThemeItemOverlay={updateThemeItemOverlay}
                  themeProductInfo={themeProductInfo}
                  onReady={handleProductAllSectionReady}
                  isOnRender={renderStates.canRender}
                  launchedFromPlayer={panelLaunchedFromPlayer}
                  launchedFromUserReviewPanel={panelLaunchedFromUserReviewPanel}
                  bgVideoInfo={panelBgVideoInfo}
                />
              );
            }

            return null;
          }, [
            isLoading,
            panelInfo,
            productDataSource,
            productType,
            selectedIndex,
            panelPatnrId,
            panelPrdtId,
            updateSelectedIndex,
            openThemeItemOverlay,
            updateThemeItemOverlay,
            themeProductInfo,
          ])}
        </TBody>

        <ThemeItemListOverlay
          productInfo={productDataSource}
          isOpen={openThemeItemOverlay}
          panelInfo={panelInfo}
          productType={productType}
          setSelectedIndex={updateSelectedIndex}
          openThemeItemOverlay={openThemeItemOverlay}
          setOpenThemeItemOverlay={updateThemeItemOverlay}
        />
      </TPanel>
    </div>
  );
}