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

import { useDispatch } from "react-redux";

import Spotlight from "@enact/spotlight";

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";

export default function FeaturedShowContents({
  featuredShowsInfos,
  videoVerticalVisible,
  currentVideoInfo,
  currentVideoShowId,
  setSelectedIndex,
  selectedIndex,
  tabIndex,
  handleItemFocus,
  tabTitle,
  panelInfo,
}) {
  const dispatch = useDispatch();
  const isClickBlocked = useRef(false);
  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;
        setTimeout(() => {
          isClickBlocked.current = false;
        }, 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]);

  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>
    </>
  );
}
