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

import { useDispatch } from "react-redux";

import Spotlight from "@enact/spotlight";

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 } from "../../../../utils/helperMethods";
import PlayerItemCard, { TYPES } from "../../PlayerItemCard/PlayerItemCard";
import ListEmptyContents from "../TabContents/ListEmptyContents/ListEmptyContents";
import css from "./LiveChannelContents.module.less";
import { sendLogTotalRecommend } from "../../../../actions/logActions";

export default function LiveChannelContents({
  liveInfos,
  currentTime,
  setSelectedIndex,
  videoVerticalVisible,
  currentVideoShowId,
  tabIndex,
  handleItemFocus,
  tabTitle,
  panelInfo
}) {
  const dispatch = useDispatch();
  const isClickBlocked = useRef(false);
  const handleFocus = useCallback(
    () => () => {
      if (handleItemFocus) {
        handleItemFocus(LOG_MENU.FULL_LIVE_CHANNELS);
      }
    },
    [handleItemFocus]
  );

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
        chanId,
        dfltThumbnailImgPath,
        patncLogoPath,
        prdtId,
        patnrId,
        showId,
        showNm,
        patncNm,
        catCd,
        strtDt,
        endDt,
        catNm,
        timezone,
        thumbnailUrl,
      } = liveInfos[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 (!showId) return;

        if (currentVideoShowId && currentVideoShowId === showId) {
          return;
        }
        setSelectedIndex(index);
        dispatch(
          updatePanel({
            name: panel_names.PLAYER_PANEL,
            panelInfo: {
              chanId,
              patnrId,
              showId,
              shptmBanrTpNm: "LIVE",
              lgCatCd: catCd,
              isUpdatedByClick: true,
            },
          })
        );
      };

      const showNameDangerouslySetInnerHTML = () => {
        if (!showId) {
          return { __html: $L("No Livestream scheduled yet") };
        }
        return showNm ? { __html: showNm } : { __html: patncNm };
      };

      return (
        <PlayerItemCard
          {...rest}
          key={prdtId}
          imageAlt={prdtId}
          logo={patncLogoPath}
          imageSource={thumbnailUrl ? thumbnailUrl : dfltThumbnailImgPath}
          videoVerticalVisible={videoVerticalVisible}
          productName={showNameDangerouslySetInnerHTML}
          patnerName={patncNm}
          onClick={handleItemClick}
          onFocus={handleFocus()}
          type={TYPES.liveHorizontal}
          spotlightId={`tabChannel-video-${index}`}
          liveInfo={liveInfos[index]}
          startDt={strtDt}
          endDt={endDt}
          currentTime={currentTime}
        />
      );
    },
    [
      liveInfos,
      currentTime,
      currentVideoShowId,
      isClickBlocked,
      dispatch,
      handleFocus,
    ]
  );

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