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 { pushPanel } from "../../../actions/panelActions";
import useScrollReset from "../../../hooks/useScrollReset";
import { panel_names } from "../../../utils/Config";
import css from "../HomeBanner/ImageBannerUnit.module.less";

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

const SpottableComponent = Spottable("div");

export default function ImageBannerUnit({
  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(() => {
    console.log("파트너ID", patnrId);
    console.log("상품", prdtId);

    let panelName = "";

    if (shptmLnkTpNm === "Featured Brands") {
      panelName = panel_names.FEATURED_BRANDS_PANEL;
    } else if (shptmLnkTpNm === "Trending now") {
      panelName = panel_names.TRENDING_NOW_PANEL;
    } else if (shptmLnkTpNm === "HOT PICKS") {
      panelName = panel_names.HOT_PICKS_PANEL;
    } else if (shptmLnkTpNm === "ON SALE") {
      panelName = panel_names.ON_SALE_PANEL;
    } else if (shptmLnkTpNm === "CATEGORY") {
      panelName = panel_names.CATEGORY_PANEL;
    } else if (shptmLnkTpNm === "Product Detail") {
      panelName = panel_names.DETAIL_PANEL;
    } else if (shptmLnkTpNm === "VOD") {
      panelName = panel_names.HOME_PANEL;
    } else if (shptmLnkTpNm === "Show Detail") {
      panelName = panel_names.HOME_PANEL;
    } else {
      panelName = panel_names.HOME_PANEL;
    }

    // panel_names.DETAIL_PANEL,
    dispatch(
      pushPanel(
        {
          name: panelName,
          panelInfo: { patnrId: patnrId, prdtId: prdtId },
        },
        []
      )
    );
  }, [dispatch, patnrId, prdtId]);

  // 화살표 아래키 누를시, 아래로 포커스
  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
      )}
    >
      {rolling === true && focusDown === true ? (
        <div
          className={classNames(css.arrow, css.leftBtn)}
          onClick={handlePrev}
        ></div>
      ) : rolling === true ? (
        <SpottableComponent
          className={classNames(css.arrow, css.leftBtn)}
          onClick={handlePrev}
          onFocus={onFocus}
          onBlur={onBlur}
          spotlightId={spotlightId + "Prev"}
        ></SpottableComponent>
      ) : rolling === false ? (
        <></>
      ) : null}
      <SpottableComponent
        className={classNames(css.itemBox, isHorizontal && css.isHorizontal)}
        onClick={handleClick}
        onFocus={onFocus}
        onBlur={onBlur}
        onKeyDown={onKeyDown}
        spotlightId={spotlightId}
      >
        <div className={css.imgBanner}>
          <img src={imgPath} />
        </div>

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

      {rolling === true && focusDown === true ? (
        <div
          className={classNames(css.arrow, css.rightBtn)}
          onClick={handlePrev}
        ></div>
      ) : rolling === true ? (
        <SpottableComponent
          className={classNames(css.arrow, css.rightBtn)}
          onClick={handleNext}
          onFocus={onFocus}
          onBlur={onBlur}
          spotlightId={spotlightId + "Next"}
        ></SpottableComponent>
      ) : rolling === false ? (
        <></>
      ) : null}
    </Container>
  );
}