shoptime/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContainer.jsx

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

import classNames from "classnames";

import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import TButtonTab, {
  LIST_TYPE,
} from "../../../components/TButtonTab/TButtonTab";
import { LOG_MENU } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./TabContainer.module.less";
import FeaturedShowContents from "./TabContents/FeaturedShowContents";
import LiveChannelContents from "./TabContents/LiveChannelContents";
import ShopNowContents from "./TabContents/ShopNowContents";
import YouMayLikeContents from "./TabContents/YouMayLikeContents";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

export default function TabContainer({
  panelInfo,
  playListInfo,
  shopNowInfo,
  selectedIndex,
  setSelectedIndex,
  liveChannelInfos,
  videoVerticalVisible,
  handleItemFocus,
  prevChannelIndex,
  currentTime,
}) {
  const [tab, setTab] = useState(0);

  const tabList = [
    $L("SHOP NOW"),
    panelInfo?.shptmBanrTpNm === "LIVE"
      ? $L("LIVE CHANNEL")
      : $L("FEATURED SHOWS"),
  ];

  const handleItemClick = useCallback(
    ({ index }) => {
      if (index === tab) return;

      if (index === 0) {
        setTimeout(() => {
          Spotlight.focus("playVideoShopNowBox");
        });
      }
      if (index === 1) {
        setTimeout(() => {
          Spotlight.focus(`tabChannel-video-${prevChannelIndex}`);
        });
      }
      setTab(index);
    },

    [tab, prevChannelIndex]
  );

  useEffect(() => {
    let nowMenu;

    if (tab === 0) {
      nowMenu = LOG_MENU.FULL_SHOP_NOW;
    }

    if (tab === 1) {
      const isLive = panelInfo?.shptmBanrTpNm === "LIVE";
      nowMenu = isLive
        ? LOG_MENU.FULL_LIVE_CHANNELS
        : LOG_MENU.FULL_FEATURED_SHOWS;
    }

    if (nowMenu) {
      handleItemFocus(nowMenu);
    }
  }, [handleItemFocus, panelInfo?.shptmBanrTpNm, tab]);

  const _handleItemFocus = useCallback(
    (nowMenu) => {
      if (handleItemFocus) {
        handleItemFocus(nowMenu);
      }
    },
    [handleItemFocus]
  );

  const onSpotlightIndicatorUpButton = useCallback(
    (e) => {
      if (videoVerticalVisible) {
        e.stopPropagation();
        e.preventDefault();
        Spotlight.focus("spotlightId-video-contaienr");
      }
    },
    [videoVerticalVisible]
  );

  return (
    <Container
      className={classNames(
        css.tabContainer,
        videoVerticalVisible && css.vertical
      )}
    >
      <TButtonTab
        contents={tabList}
        className={css.tTab}
        onItemClick={handleItemClick}
        selectedIndex={tab}
        listType={LIST_TYPE.small}
        onSpotlightLeft={onSpotlightIndicatorUpButton}
      />

      {tab === 0 && (
        <ShopNowContents
          shopNowInfo={shopNowInfo}
          playListInfo={playListInfo && playListInfo[selectedIndex]}
          videoVerticalVisible={videoVerticalVisible}
          panelInfo={panelInfo}
          tabIndex={tab}
          handleItemFocus={_handleItemFocus}
        />
      )}
      {panelInfo?.shptmBanrTpNm === "VOD" && tab === 1 && (
        <FeaturedShowContents
          featuredShowsInfos={playListInfo}
          currentVideoInfo={playListInfo[selectedIndex]}
          setSelectedIndex={setSelectedIndex}
          selectedIndex={selectedIndex}
          videoVerticalVisible={videoVerticalVisible}
          currentVideoShowId={playListInfo[selectedIndex]?.showId}
          tabIndex={tab}
          handleItemFocus={_handleItemFocus}
        />
      )}
      {panelInfo?.shptmBanrTpNm === "LIVE" && tab === 1 && liveChannelInfos && (
        <LiveChannelContents
          selectedIndex={selectedIndex}
          setSelectedIndex={setSelectedIndex}
          videoVerticalVisible={videoVerticalVisible}
          liveInfos={playListInfo}
          tabIndex={tab}
          handleItemFocus={_handleItemFocus}
          currentTime={currentTime}
        />
      )}

      {shopNowInfo && shopNowInfo.length < 3 && tab === 0 && (
        <YouMayLikeContents
          shopNowInfo={shopNowInfo}
          handleItemFocus={_handleItemFocus}
          playListInfo={playListInfo && playListInfo[selectedIndex]}
        />
      )}
    </Container>
  );
}