import { useState } from "react";
import PropTypes from "prop-types";
import { useNavigate, useLocation } from "react-router";
import { UIMCButton } from "@ui-marcom/react/button";
import { UIMCControlButton } from "@ui-marcom/react/control-button";
import { UIMCIcon } from "@ui-marcom/react/icon";
import { UIMCToggleButtonSwitch } from "@ui-marcom/react/toggle-button-switch";
import { useContent } from "../../services/content";
import { useAnalytics } from "../../services/analytics/analytics";
import { navigateWithTransition } from "../../utils/viewTransition";
import Reload from "../../components/Reload";
import "./ValuePartnershipNav.scss";

// route segment -> content.valuePartnership.navigation key (old app's page ids)
const SECTIONS = [
  { path: "globe", navKey: "globe-page", icon: "location-pin" },
  { path: "excellence", navKey: "value-excellence-page", icon: "portfolio" },
  { path: "partnerships", navKey: "value-partnerships-page", icon: "department" },
];

/**
 * Fixed nav bar shared by all 3 Value Partnership sections: section switcher
 * (labels from content) + a burger toggle on the right that reveals the
 * "Switch App" button back to the app selection (kept collapsed by default
 * per Figma, unlike the sibling nav bars - ValueDriverNav/CategoryMenu/
 * ValueCheckboxPanel - which show it unconditionally). The section-switcher
 * labels/logo area also carries the long-press-to-reload kiosk gesture (see
 * {@link Reload}).
 *
 * `children`, when passed, renders as a second button group alongside the
 * section switcher - the lifted-state slot a routed sub-page (e.g.
 * PartnershipsPage) uses to put its own page-scoped actions in this shared
 * bar, mirroring how `suppressNav`/`onSelectionChange` let a sub-page affect
 * this bar from below (see ValuePartnership.jsx).
 *
 * @param {Object} props
 * @param {*} [props.children] - React node(s) for the second button group.
 */
export const ValuePartnershipNav = ({ children }) => {
  const navigate = useNavigate();
  const { pathname, search } = useLocation();
  const { content } = useContent();
  const { trackEvent } = useAnalytics();
  const navigation = content.valuePartnership?.navigation || {};
  // "Switch App" stays hidden behind this burger toggle here (unlike the
  // sibling nav bars - ValueDriverNav/CategoryMenu/ValueCheckboxPanel - which
  // show it unconditionally) because this bar's section switcher already
  // fills the layout; see Figma for the collapsed/expanded burger look.
  const [menuOpen, setMenuOpen] = useState(false);

  // without this, UIMCToggleButtonSwitch defaults `current` to 0 (its own
  // default) on every mount - fine when navigating by clicking (this bar
  // stays mounted across route changes, see ValuePartnership.jsx), but wrong
  // after a hard reload straight into e.g. /value-partnership/excellence,
  // which showed "Globe" as active no matter which section was actually open
  const activeIndex = Math.max(
    0,
    SECTIONS.findIndex(({ path }) => pathname.endsWith(`/${path}`))
  );

  const goToSection = (path) => {
    setMenuOpen(false);
    trackEvent?.("navigation_click", { element: path });
    navigateWithTransition(navigate, `/value-partnership/${path}${search}`);
  };

  return (
    <Reload>
      <nav className="value-partnership-nav">
        <div className="value-partnership-nav__sections">
          <UIMCToggleButtonSwitch
            className="value-partnership-nav__switch"
            size="medium"
            current={activeIndex}>
            {SECTIONS.map(({ path, navKey }) => {
              return (
                <UIMCButton
                  key={path}
                  className={`value-partnership-nav__button`}
                  variant="standard"
                  title={navigation[navKey]?.label || path}
                  size="medium"
                  onClick={() => goToSection(path)}>
                  <UIMCIcon slot="prefix" icon={navigation[navKey]?.icon} />
                  {navigation[navKey]?.label || path}
                </UIMCButton>
              );
            })}
          </UIMCToggleButtonSwitch>
        </div>
        {children && <div className="value-partnership-nav__actions">{children}</div>}
        <div className="value-partnership-nav__menu">
          {menuOpen && (
            <UIMCButton
              className="value-partnership-nav__switch-app"
              variant="standard"
              title="Apps"
              onClick={() => {
                trackEvent?.("navigation_click", { element: "Switch App" });
                navigate("/");
              }}>
              {/* <UIMCIcon slot="prefix" icon="arrow-right" /> */}
              Apps
            </UIMCButton>
          )}
          <UIMCControlButton
            className="value-partnership-nav__menu-toggle"
            variant="standard"
            size="medium"
            icon={menuOpen ? "close" : "menu"}
            title={menuOpen ? "Close" : "Menu"}
            onClick={() => setMenuOpen((open) => !open)}
          />
        </div>
      </nav>
    </Reload>
  );
};

ValuePartnershipNav.propTypes = {
  children: PropTypes.node,
};