import React, { useCallback, useEffect, 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_MENU, 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";

export default function LiveChannelContents({
  liveInfos,
  selectedIndex,
  setSelectedIndex,
  videoVerticalVisible,
  tabIndex,
  handleItemFocus,
}) {
  const dispatch = useDispatch();

  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,
        strtDt,
        endDt,
        timezone,
        thumbnailUrl,
      } = liveInfos[index];

      const handleItemClick = () => {
        if (!showId) return;

        setSelectedIndex(index);
        dispatch(
          updatePanel({
            name: panel_names.PLAYER_PANEL,
            panelInfo: { chanId, patnrId, showId, shptmBanrTpNm: "LIVE" },
          })
        );
      };

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

      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]}
        />
      );
    },
    [liveInfos, 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>
    </>
  );
}