import { useState } from "react";
import { useNavigate, useLocation } from "react-router";
import { UIMCButton } from "@ui-marcom/react/button";
import { UIMCControlButton } from "@ui-marcom/react/control-button";
import { useScreensaver } from "../../services/screensaver";
import { navigateWithTransition } from "../../utils/viewTransition";
import { SlidesOverlay } from "../SlidesOverlay/SlidesOverlay";
import "./SlideNavigation.scss";

/**
 * Fixed bottom navigation of the slide pages, with three modes:
 * - closed: menu button + prev/next arrows (hidden entirely while the view
 *   has no adjacency, e.g. before content has loaded)
 * - menu: full-width bar with Home / Screensaver / Apps / Slides / close
 * - slides: same bar plus the full-screen {@link SlidesOverlay}
 *
 * @param {Object} props
 * @param {string|null} props.prevViewId - Target of the "back" arrow, disables it when null.
 * @param {string|null} props.nextViewId - Target of the "next" arrow, disables it when null.
 * @param {string} props.homeViewId - View the menu's Home button navigates to.
 * @param {string} props.currentViewId - Currently shown view (highlighted in the slides overlay).
 * @param {function(string): void} props.onNavigate - Navigates within the current app, keeping config params.
 */
export const SlideNavigation = ({
  prevViewId,
  nextViewId,
  homeViewId,
  currentViewId,
  onNavigate,
}) => {
  // "closed" shows the regular menu/prev/next bar; "menu" the expanded menu
  // bar; "slides" the menu bar plus the full-screen slide-thumbnail overlay
  const [mode, setMode] = useState("closed");
  const navigate = useNavigate();
  const { search } = useLocation();
  const { showNow } = useScreensaver();

  if (!prevViewId && !nextViewId) return null;

  const mainMenuButtons = (
    <div className="slide-navigation__menu-group">
      <UIMCButton
        className="slide-navigation__button slide-navigation__button--menu-item"
        variant="standard"
        title="Home"
        onClick={() => {
          setMode("closed");
          onNavigate(homeViewId);
        }}>
        Home
      </UIMCButton>
      <UIMCButton
        className="slide-navigation__button slide-navigation__button--menu-item"
        variant="standard"
        title="Screensaver"
        onClick={() => {
          setMode("closed");
          showNow();
        }}>
        Screensaver
      </UIMCButton>
      <UIMCButton
        className="slide-navigation__button slide-navigation__button--menu-item"
        variant="standard"
        title="Apps"
        onClick={() => {
          setMode("closed");
          navigateWithTransition(navigate, `/${search}`);
        }}>
        Apps
      </UIMCButton>
    </div>
  );

  if (mode === "slides") {
    return (
      <>
        <SlidesOverlay
          currentViewId={currentViewId}
          onSelectSlide={(viewId) => {
            setMode("closed");
            onNavigate(viewId);
          }}
        />
        <div className="slide-navigation slide-navigation--menu">
          {mainMenuButtons}
          <div className="slide-navigation__menu-group">
            <UIMCButton
              className="slide-navigation__button slide-navigation__button--menu-item"
              variant="standard"
              title="Back"
              onClick={() => setMode("menu")}>
              ← Back
            </UIMCButton>
            <UIMCControlButton
              className="slide-navigation__button slide-navigation__button--menu-item"
              variant="standard"
              size="medium"
              icon="close"
              title="Schließen"
              onClick={() => setMode("closed")}
            />
          </div>
        </div>
      </>
    );
  }

  if (mode === "menu") {
    return (
      <div className="slide-navigation slide-navigation--menu">
        {mainMenuButtons}
        <div className="slide-navigation__menu-group">
          <UIMCButton
            className="slide-navigation__button slide-navigation__button--menu-item"
            variant="standard"
            title="Slides"
            onClick={() => setMode("slides")}>
            Slides
          </UIMCButton>
          <UIMCControlButton
            className="slide-navigation__button slide-navigation__button--menu-item"
            variant="standard"
            size="medium"
            icon="close"
            title="Schließen"
            onClick={() => setMode("closed")}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="slide-navigation">
      <UIMCControlButton
        className="slide-navigation__button slide-navigation__button--menu"
        variant="standard"
        size="medium"
        icon="menu"
        title="Menu"
        onClick={() => setMode("menu")}
      />
      <UIMCControlButton
        className="slide-navigation__button slide-navigation__button--prev"
        variant="standard"
        size="medium"
        icon="arrow-long-left"
        title="Zurück"
        disabled={!prevViewId}
        onClick={() => prevViewId && onNavigate(prevViewId)}
      />
      <UIMCControlButton
        className="slide-navigation__button slide-navigation__button--next"
        variant="standard"
        size="medium"
        icon="arrow-long-right"
        title="Weiter"
        disabled={!nextViewId}
        onClick={() => nextViewId && onNavigate(nextViewId)}
      />
    </div>
  );
};