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 { LinkWidget } from "../LinkWidget/LinkWidget";
import { useContent } from "../../services/content";

// import { useTabs } from "../../services/tabs";

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,
 *   plus an "Open Link" button when the current view has a `link`/`visibleLink`
 *   (opened in a new tab via {@link useTabs})
 * - 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 { views } = useContent();
  const navigate = useNavigate();
  const { search } = useLocation();
  const { showNow } = useScreensaver();
  // const { openTab } = useTabs();
  const [linkOpen, setLinkOpen] = useState(0);
  const [currentLink, setCurrentLink] = useState(null);

  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") {
    // console.log(" :/ ", views.get(currentViewId));
    const link = views.get(currentViewId).link || null;
    const visiblelink = views.get(currentViewId).visibleLink || null;

    const clickLinkBtn = (linkId) => {
      if (linkId === 1) {
        setLinkOpen(linkId);
        setMode("link");
        setCurrentLink(link);
      }
      if (linkId === 2) {
        setLinkOpen(linkId);
        setMode("link");
        setCurrentLink(visiblelink);
      }
      if ((linkOpen === 1 && linkId === 1) || (linkOpen === 2 && linkId === 2)) setLinkOpen(0);
    };
    return (
      <div className="slide-navigation slide-navigation--menu">
        {/* {linkOpen !== 0 ? (
          <div className="external-link">
            <iframe src={currentLink}></iframe>
          </div>
          <LinkWidget link={currentLink} />
        ) : null} */}
        {mainMenuButtons}
        <div className="slide-navigation__menu-group">
          {visiblelink ? (
            <UIMCControlButton
              className="slide-navigation__button slide-navigation__button--visiblelink "
              variant="standard"
              size="medium"
              icon={`arrow-exit`}
              title="Open Link"
              onClick={() => clickLinkBtn(2)}
            />
          ) : null}
          {link ? (
            <UIMCControlButton
              className="rotate slide-navigation__button--link"
              variant="standard"
              size="medium"
              icon={`arrow-exit`}
              title="Open Link"
              onClick={() => clickLinkBtn(1)}
            />
          ) : null}
          <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");
              setLinkOpen(0);
            }}
          />
        </div>
      </div>
    );
  }

  if (mode === "link") {
    const link = views.get(currentViewId).link || null;
    const visiblelink = views.get(currentViewId).visibleLink || null;
    const closeLink = (link) => {
      if (link === currentLink) setMode("menu");
      else setCurrentLink(link);
    };
    return (
      <>
        <LinkWidget link={currentLink} />
        <div className="slide-navigation slide-navigation--menu">
          {mainMenuButtons}
          <div className="slide-navigation__menu-group">
            {visiblelink ? (
              <UIMCControlButton
                className="slide-navigation__button slide-navigation__button--visiblelink "
                variant="standard"
                size="medium"
                icon={`${currentLink === visiblelink ? "close" : "arrow-exit"}`}
                title="Open Link"
                onClick={() => closeLink(visiblelink)}
              />
            ) : null}
            {link ? (
              <UIMCControlButton
                className="rotate slide-navigation__button--link"
                variant="standard"
                size="medium"
                icon={`${currentLink === link ? "close" : "arrow-exit"}`}
                title="Open Link"
                onClick={() => closeLink(link)}
              />
            ) : null}
            <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");
                setLinkOpen(0);
              }}
            />
          </div>
        </div>
      </>
    );
  }
  const qrcode = views.get(currentViewId).qrcode || null;

  return (
    <div className="slide-navigation">
      {qrcode ? <img className="slide-navigation__qrcode" src={qrcode} alt="QR Code" /> : null}
      <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>
  );
};