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

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

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

import Spotlight from "@enact/spotlight";

import {
  getBrandLayoutInfo,
  getBrandList,
  getBrandLiveChannelInfo,
} from "../../actions/brandActions";
import TBody from "../../components/TBody/TBody";
import TPanel from "../../components/TPanel/TPanel";
import Banner from "./Banner/Banner";
import css from "./FeaturedBrandsPanel.module.less";
import LiveChannels from "./LiveChannels/LiveChannels";
import QuickMenu from "./QuickMenu/QuickMenu";

const getSelectedBrandInfo = (brandInfo, selectedPatnrId) => {
  return brandInfo.find((brand) => brand?.patnrId === selectedPatnrId);
};

export default function FeaturedBrandsPanel() {
  const dispatch = useDispatch();

  const panelInfo = useSelector((state) => state.panels.panels[0].panelInfo);
  const brandInfo = useSelector((state) => state.brand.brandInfoData.brandInfo);
  const brandTopImgInfo = useSelector(
    (state) => state.brand.brandLayoutInfoData.brandTopImgInfo
  );
  const brandChanInfo = useSelector(
    (state) => state.brand.brandLiveChannelInfoData.brandChanInfo
  );
  const brandChannelCnt = useSelector(
    (state) => state.brand.brandLiveChannelInfoData.brandChannelCnt
  );

  const [selectedPatnrId, setSelectedPatnrId] = useState(String(panelInfo));
  const [selectedBrandInfo, setSelectedBrandInfo] = useState();

  const handleQuickMenuClick = useCallback(
    (patnrId) => {
      if (selectedPatnrId === patnrId) {
        return;
      }

      setSelectedPatnrId(patnrId);
    },
    [selectedPatnrId]
  );

  useEffect(() => {
    if (!brandInfo) {
      dispatch(getBrandList());
    }
  }, [brandInfo, dispatch]);

  useEffect(() => {
    if (brandInfo && selectedPatnrId) {
      setSelectedBrandInfo(getSelectedBrandInfo(brandInfo, selectedPatnrId));
      dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
      dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
    }
  }, [brandInfo, dispatch, selectedPatnrId]);

  useEffect(() => {
    // @@pyh Todo, loading 적용 이후 loading으로 조건 추가
    if (selectedPatnrId) {
      Spotlight.focus("spotlight" + selectedPatnrId);
    }
  }, [selectedPatnrId]);

  return (
    /* scenario page 98 */
    <TPanel className={css.container}>
      <TBody>
        {brandInfo && brandInfo.length > 1 && (
          <QuickMenu
            brandInfo={brandInfo}
            onQuickMenuClick={handleQuickMenuClick}
            selectedPatnrId={selectedPatnrId}
          />
        )}

        {brandTopImgInfo && selectedBrandInfo && (
          <Banner
            brandTopImgInfo={brandTopImgInfo}
            selectedBrandInfo={selectedBrandInfo}
          />
        )}

        <div className={css.sectionContainer}>
          {brandChanInfo && (
            <LiveChannels
              brandChanInfo={brandChanInfo[0]}
              brandChannelCnt={brandChannelCnt}
            />
          )}
        </div>
      </TBody>
    </TPanel>
  );
}