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

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

import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import liveShow from "../../../../assets/images/tag-liveshow.png";
import { pushPanel } from "../../../actions/panelActions";
import { VideoPlayer } from "../../../components/VideoPlayer/VideoPlayer";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "./VodUnit.module.less";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

const SpottableComponent = Spottable("div");

export default function VodUnit({
  children,
  imageAlt,
  imgName,
  imgPath,
  showUrl,
  showNm,
  patncLogoPath,
  priceInfo,
  patnrId,
  prdtId,
  productId,
  productName,
  soldoutFlag,
  isHorizontal,
  shptmLnkTpNm,
  rolling,
  startIndex,
  lastIndex,
  currentIndex,
  getIndex,
  getFocus,
  spotlightId,
  scrollTop,
  ...rest
}) {
  const dispatch = useDispatch();
  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);

  // 비디오 클릭
  const handleClick = useCallback(() => {
    dispatch(
      pushPanel({
        name: panel_names.PLAYER_PANEL,
      })
    );
  }, [dispatch]);

  // 화살표 아래키 누를시, 아래로 포커스
  const [focusDown, setFocusDown] = useState(false);

  const handlePrev = useCallback(() => {
    if (currentIndex === 0) {
      getIndex(lastIndex);
      return;
    }
    getIndex(currentIndex - 1);
  }, [getIndex]);

  const handleNext = useCallback(() => {
    if (lastIndex === currentIndex) {
      getIndex(0);
      return;
    }
    getIndex(currentIndex + 1);
  }, [getIndex]);

  const onFocus = useCallback(() => {
    getFocus(true);
    handleScrollReset();
  }, []);

  const onBlur = useCallback(() => {
    setFocusDown(false);
    getFocus(false);
    handleStopScrolling();
  }, []);

  const onKeyDown = useCallback(
    (event) => {
      if (event.key === "ArrowDown") {
        setFocusDown(true);
      }
    },
    [focusDown]
  );

  return (
    <Container
      className={classNames(
        css.rollingWrap,
        isHorizontal && css.isHorizontalWrap
      )}
    >
      <SpottableComponent
        className={classNames(css.arrow, css.leftBtn)}
        onClick={handlePrev}
        onFocus={onFocus}
        onBlur={onBlur}
        spotlightId={spotlightId + "Prev"}
      />

      <SpottableComponent
        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
        onClick={handleClick}
        onFocus={onFocus}
        onBlur={onBlur}
        onKeyDown={onKeyDown}
        spotlightId={spotlightId}
      >
        <p className={css.liveIcon}>
          <img src={liveShow} />
        </p>

        <VideoPlayer disabled={true} noAutoPlay={false} spotlightDisabled>
          <source src={showUrl} type="application/mpegurl" />
        </VideoPlayer>

        <p className={css.brandIcon}>
          <img src={patncLogoPath} />
        </p>
      </SpottableComponent>

      <SpottableComponent
        className={classNames(css.arrow, css.rightBtn)}
        onClick={handleNext}
        onFocus={onFocus}
        onBlur={onBlur}
        spotlightId={spotlightId + "Next"}
      ></SpottableComponent>
    </Container>
  );
}