import React, { memo, useCallback } from "react";

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

import Spottable from "@enact/spotlight/Spottable";
import Marquee from "@enact/ui/Marquee";

import { popPanel, updatePanel } from "../../../actions/panelActions";
import { panel_names } from "../../../utils/Config";
import css from "./ImageOverlayContents.module.less";

const SpottableButton = Spottable("button");

const ImageOverlayContents = ({
  overlayContentsVisible,
  panelInfo,
  selectedRoomThemeInfosLength,
  selectedThemeExpsOrd,
  setOverlayContentsVisible,
  setSelectedThemeExpsOrd,
  setSideContentsVisible,
  sideContentsVisible,
  themeNm,
  ...rest
}) => {
  const dispatch = useDispatch();

  const handleBackClick = useCallback(
    (e) => {
      // e.stopPropagation();

      if (sideContentsVisible) return;

      dispatch(popPanel());
    },
    [dispatch, sideContentsVisible]
  );

  const handleUpClick = useCallback(
    (e) => {
      e.stopPropagation();

      if (sideContentsVisible) return;

      const previousPageNumber =
        selectedThemeExpsOrd === 1
          ? selectedRoomThemeInfosLength
          : selectedThemeExpsOrd - 1;

      setSelectedThemeExpsOrd(previousPageNumber);
    },
    [
      sideContentsVisible,
      selectedRoomThemeInfosLength,
      selectedThemeExpsOrd,
      setSelectedThemeExpsOrd,
    ]
  );

  const handleDownClick = useCallback(
    (e) => {
      e.stopPropagation();

      if (sideContentsVisible) return;

      const nextPageNumber =
        selectedThemeExpsOrd === selectedRoomThemeInfosLength
          ? 1
          : selectedThemeExpsOrd + 1;

      setSelectedThemeExpsOrd(nextPageNumber);
    },
    [
      sideContentsVisible,
      selectedRoomThemeInfosLength,
      selectedThemeExpsOrd,
      setSelectedThemeExpsOrd,
    ]
  );

  const handleArrowClick = useCallback(
    (e) => {
      e.stopPropagation();

      if (Object.keys(panelInfo)?.length >= 5 && panelInfo?.y !== 0) {
        dispatch(
          updatePanel({
            name: panel_names.IMAGE_PANEL,
            panelInfo: { y: 0 },
          })
        );
      }

      setOverlayContentsVisible(true);
      setSideContentsVisible((prev) => !prev);
    },
    [dispatch, panelInfo, setOverlayContentsVisible, setSideContentsVisible]
  );

  return (
    <div className={css.container}>
      <div
        className={classNames(
          css.darkGradient,
          overlayContentsVisible ? css.show : css.hidden
        )}
        id="dark-gradient"
      />

      <SpottableButton
        className={classNames(
          css.back,
          overlayContentsVisible ? css.show : css.hidden
        )}
        onClick={handleBackClick}
        spotlightDisabled={sideContentsVisible || !overlayContentsVisible}
        {...rest}
      />
      <h2 className={css.title}>
        <Marquee
          className={classNames(
            css.marquee,
            overlayContentsVisible ? css.show : css.hidden
          )}
          marqueeOn="render"
        >
          {themeNm}
        </Marquee>
      </h2>

      <SpottableButton
        // up
        className={classNames(
          css.up,
          overlayContentsVisible ? css.show : css.hidden
        )}
        onClick={handleUpClick}
        spotlightDisabled={sideContentsVisible || !overlayContentsVisible}
        {...rest}
      />

      <SpottableButton
        // down
        className={classNames(
          css.down,
          overlayContentsVisible ? css.show : css.hidden
        )}
        onClick={handleDownClick}
        spotlightDisabled={sideContentsVisible || !overlayContentsVisible}
        {...rest}
      />

      <SpottableButton
        // arrow
        className={classNames(
          css.arrow,
          sideContentsVisible ? css.close : css.open
        )}
        onClick={handleArrowClick}
        spotlightId="spotlightId-arrow"
        {...rest}
      />

      <SpottableButton
        // reduce
        className={classNames(
          css.redution,
          overlayContentsVisible ? css.show : css.hidden
        )}
        onClick={handleBackClick}
        spotlightDisabled={sideContentsVisible || !overlayContentsVisible}
        {...rest}
      />
    </div>
  );
};

export default memo(ImageOverlayContents);
