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

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

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

import { getVideoIndicatorFocus } from "../../../../actions/productActions";
import css from "./ThemeIndicatorArrow.module.less";

const SpottableComponent = Spottable("div");
export default function ThemeIndicatorArrow({
  imageSelectedIndex = 0,
  setImageSelectedIndex,
  themeProductInfo,
  imageLength,
}) {
  const dispatch = useDispatch();
  const videoIndicatorFocus = useSelector(
    (state) => state.product.videoIndicatorFocus
  );

  const hasMediaUrl = useMemo(() => {
    return (
      themeProductInfo?.prdtMediaUrl && themeProductInfo?.prdtMediaUrl !== null
    );
  }, [themeProductInfo]);

  const handlePrevClick = useCallback(() => {
    if (imageSelectedIndex > 0) {
      setImageSelectedIndex((prev) => prev - 1);

      if (imageSelectedIndex === 1) {
        return Spotlight.focus("thumbnailNextButton");
      }
    }
  }, [imageSelectedIndex]);

  const handleNextClick = useCallback(() => {
    if (hasMediaUrl && imageSelectedIndex < imageLength) {
      setImageSelectedIndex((prev) => prev + 1);
      if (imageSelectedIndex === imageLength - 1) {
        return Spotlight.focus("thumbnailPrevButton");
      }
    } else if (imageSelectedIndex + 1 < imageLength) {
      setImageSelectedIndex((prev) => prev + 1);

      if (imageSelectedIndex === imageLength - 2) {
        return Spotlight.focus("thumbnailPrevButton");
      }
    }

    if (imageLength === imageSelectedIndex) {
      Spotlight.focus("");
    }
  }, [
    imageSelectedIndex,
    hasMediaUrl,
    themeProductInfo,
    imageSelectedIndex,
    imageLength,
  ]);

  const nextButtonOnFocus = useCallback(() => {
    dispatch(getVideoIndicatorFocus(true));
  }, [dispatch]);

  const nextButtonOnBlur = useCallback(() => {
    dispatch(getVideoIndicatorFocus(false));
  }, [dispatch]);

  useEffect(() => {
    return () => {
      dispatch(getVideoIndicatorFocus(false));
    };
  }, []);

  return (
    <>
      <div className={css.thumbnailIndicator}>
        <>
          <SpottableComponent
            className={classNames(
              css.prevButton,
              imageSelectedIndex === 0 && css.disable
            )}
            onClick={handlePrevClick}
            spotlightDisabled={
              imageSelectedIndex === -1 ||
              (!themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0) ||
              (themeProductInfo?.prdtMediaUrl && imageSelectedIndex === 0)
            }
            spotlightId="thumbnailPrevButton"
            aria-label={themeProductInfo?.prdtNm}
          />
          {hasMediaUrl ? (
            <span>
              {imageSelectedIndex + 1} / {imageLength + 1}
            </span>
          ) : (
            <span>
              {imageSelectedIndex + 1} / {imageLength}
            </span>
          )}
          <SpottableComponent
            className={classNames(
              css.nextButton,
              imageLength === (imageSelectedIndex || 1) && css.disable,
              !themeProductInfo?.prdtMediaUrl &&
                imageLength - 1 === imageSelectedIndex &&
                css.disable,
              videoIndicatorFocus && css.focused
            )}
            onClick={handleNextClick}
            onFocus={nextButtonOnFocus}
            onBlur={nextButtonOnBlur}
            spotlightDisabled={
              imageLength === (imageSelectedIndex || 1) ||
              (!themeProductInfo?.prdtMediaUrl &&
                imageLength - 1 === imageSelectedIndex)
            }
            spotlightId="thumbnailNextButton"
          />
        </>
      </div>
    </>
  );
}
