shoptime/com.twin.app.shoptime/src/views/PlayerPanel/PlayerTabContents/TabContents/FeaturedShowContents.jsx

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

import { useDispatch } from 'react-redux';

import Spotlight from '@enact/spotlight';

// <<<<<<< HEAD
import defaultImage from '../../../../../assets/images/img-thumb-empty-144@3x.png';
import { updatePanel } from '../../../../actions/panelActions';
import TVirtualGridList from '../../../../components/TVirtualGridList/TVirtualGridList';
import { LOG_CONTEXT_NAME, LOG_MENU, LOG_MESSAGE_ID, panel_names } from '../../../../utils/Config';
import { $L, removeSpecificTags } from '../../../../utils/helperMethods';
import PlayerItemCard, { TYPES } from '../../PlayerItemCard/PlayerItemCard';
import ListEmptyContents from '../TabContents/ListEmptyContents/ListEmptyContents';
import css from './LiveChannelContents.module.less';
import { getMainCategoryShowDetail } from '../../../../actions/mainActions';
import { sendLogTotalRecommend } from '../../../../actions/logActions';
// =======
// import defaultImage from "../../../../../assets/images/img-thumb-empty-144@3x.png";
// import { updatePanel } from "../../../../actions/panelActions";
// import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
// import {
//   LOG_CONTEXT_NAME,
//   LOG_MENU,
//   LOG_MESSAGE_ID,
//   panel_names,
// } from "../../../../utils/Config";
// import { $L, removeSpecificTags } from "../../../../utils/helperMethods";
// import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
// import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
// import css from "./LiveChannelContents.module.less";
// import { getMainCategoryShowDetail } from "../../../../actions/mainActions";
// import { sendLogTotalRecommend } from "../../../../actions/logActions";
// >>>>>>> gitlab/develop

export default function FeaturedShowContents({
  featuredShowsInfos,
  videoVerticalVisible,
  currentVideoInfo,
  currentVideoShowId,
  setSelectedIndex,
  selectedIndex,
  tabIndex,
  handleItemFocus,
  tabTitle,
  panelInfo,
}) {
  const dispatch = useDispatch();
  const isClickBlocked = useRef(false);
  const blockTimeoutRef = useRef(null);

  const handleFocus = useCallback(
    () => () => {
      if (handleItemFocus) {
        handleItemFocus(LOG_MENU.FULL_FEATURED_SHOWS);
      }
    },
    [handleItemFocus]
  );

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
        thumbnailUrl,
        logoImgPath,
        thumbnailImgPath,
        patncLogoPath,
        patnrId,
        showId,
        prdtId,
        patncNm,
        showNm,
        catNm,
        lgCatCd,
      } = featuredShowsInfos[index];

      const handleItemClick = () => {
        const params = {
          tabTitle: tabTitle[tabIndex],
          showId: showId,
          showTitle: showNm,
          showType: panelInfo?.shptmBanrTpNm,
          category: catNm,
          partner: patncNm,
          contextName: LOG_CONTEXT_NAME.SHOW,
          messageId: LOG_MESSAGE_ID.CONTENTCLICK,
        };
        dispatch(sendLogTotalRecommend(params));
        //중복클릭방지
        if (isClickBlocked.current) {
          return;
        }

        isClickBlocked.current = true;

        // 이전 타이머가 있으면 정리
        if (blockTimeoutRef.current) {
          clearTimeout(blockTimeoutRef.current);
        }

        blockTimeoutRef.current = setTimeout(() => {
          isClickBlocked.current = false;
          blockTimeoutRef.current = null;
        }, 600);

        if (currentVideoShowId && currentVideoShowId === showId) {
          return;
        }

        setSelectedIndex(index);
        dispatch(
          getMainCategoryShowDetail({
            patnrId: patnrId,
            showId: showId,
          })
        );
      };

      const showNameDangerouslySetInnerHTML = () => {
        const sanitizedString = removeSpecificTags(showNm);
        return { __html: sanitizedString };
      };

      return (
        <PlayerItemCard
          {...rest}
          key={prdtId}
          imageAlt={prdtId}
          logo={logoImgPath ? logoImgPath : patncLogoPath}
          imageSource={
            thumbnailUrl
              ? thumbnailUrl
              : thumbnailImgPath
                ? thumbnailImgPath
                : defaultImage
          }
          productName={showNameDangerouslySetInnerHTML}
          patnerName={patncNm}
          onClick={handleItemClick}
          onFocus={handleFocus()}
          type={TYPES.featuredHorizontal}
          spotlightId={`tabChannel-video-${index}`}
          videoVerticalVisible={videoVerticalVisible}
          selectedIndex={index}
          currentVideoVisible={currentVideoShowId === featuredShowsInfos[index].showId}
        />
      );
    },
    [featuredShowsInfos, currentVideoInfo, currentVideoShowId, videoVerticalVisible, isClickBlocked]
  );

  useEffect(() => {
    const timer = setTimeout(() => {
      Spotlight.focus('tabChannel-video-' + selectedIndex);
    });

    return () => clearTimeout(timer);
  }, [featuredShowsInfos]);

  // cleanup useEffect
  useEffect(() => {
    return () => {
      if (blockTimeoutRef.current) {
        clearTimeout(blockTimeoutRef.current);
      }
    };
  }, []);

  return (
    <>
      <div className={css.container}>
        {featuredShowsInfos && featuredShowsInfos.length > 0 ? (
          <TVirtualGridList
            dataSize={featuredShowsInfos.length}
            direction="vertical"
            renderItem={renderItem}
            itemWidth={videoVerticalVisible ? 540 : 600}
            itemHeight={176}
            spacing={12}
          />
        ) : (
          <ListEmptyContents tabIndex={tabIndex} />
        )}
      </div>
    </>
  );
}