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

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

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

import Spotlight from "@enact/spotlight";

import {
  getBrandLayoutInfo,
  getBrandList,
  getBrandLiveChannelInfo,
  getBrandTSVInfo,
} 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";
import TodaysDeals from "./TodaysDeals/TodaysDeals";
import UpComing from "./UpComing/UpComing";

const findItemByPatnrId = (array, patnrId) => {
  return array.find((item) => item.patnrId === patnrId);
};

const isNotEmptyObject = (object) => {
  return Object.keys(object).length > 0;
};

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 brandLiveChannelUpcoming = useSelector(
    (state) => state.brand.brandLiveChannelInfoData.brandLiveChannelUpcoming
  );
  const brandTsvInfo = useSelector(
    (state) => state.brand.brandTsvInfoData.brandTsvInfo
  );

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

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

  useEffect(() => {
    if (brandInfo && selectedPatnrId) {
      setSelectedBrandInfo(findItemByPatnrId(brandInfo, selectedPatnrId));
      dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
      dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
      dispatch(getBrandTSVInfo({ 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 className={css.tBody}>
        {brandInfo && brandInfo.length > 1 && (
          <QuickMenu
            brandInfo={brandInfo}
            selectedPatnrId={selectedPatnrId}
            setSelectedPatnrId={setSelectedPatnrId}
          />
        )}

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

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

          {brandLiveChannelUpcoming && brandLiveChannelUpcoming.length > 0 && (
            <UpComing brandLiveChannelUpcoming={brandLiveChannelUpcoming} />
          )}

          {brandTsvInfo && isNotEmptyObject(brandTsvInfo) && (
            <TodaysDeals brandTsvInfo={brandTsvInfo} />
          )}
        </div>
      </TBody>
    </TPanel>
  );
}