import { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { UIMCButton } from "@ui-marcom/react/button";
import { UIMCIcon } from "@ui-marcom/react/icon";
import { useContent } from "../../../services/content";
import { useAnalytics } from "../../../services/analytics/analytics";
import { CategoryMenu } from "./CategoryMenu";
import { CategoryOverlay } from "./CategoryOverlay";
import { PresentationBrowser } from "./PresentationBrowser";
import { SlideView } from "./SlideView";
import "./PartnershipsPage.scss";

/**
 * Value Partnerships page: hospital-department/role browser + presentation
 * deck viewer, ported from value-partnerships-page.js. See CategoryMenu,
 * CategoryOverlay, PresentationBrowser and SlideView for the individual
 * pieces this composes.
 *
 * @param {Object} props
 * @param {function(*): void} [props.onActionsChange] -
 *   Registers this page's "Show key slides"/"Show all presentations" buttons
 *   into ValuePartnershipNav's children slot (see ValuePartnership.jsx).
 */
export const PartnershipsPage = ({ onActionsChange }) => {
  const { content } = useContent();
  const {
    partnerships,
    partnershipsFilterUS,
    partnershipsFilter,
    labels = {},
  } = content.valuePartnership || {};
  const { trackEvent, trackSlideOrStory } = useAnalytics();

  const [selectedView, setSelectedView] = useState("departments");
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [browserMode, setBrowserMode] = useState(null); // null | "all" | "keySlides"
  const [hideUS, setHideUS] = useState(false);
  const [openSlide, setOpenSlide] = useState(null); // { ppt, initialPage } | null

  useEffect(() => {
    onActionsChange?.(
      <>
        <UIMCButton
          className="value-partnership-nav__action-button"
          variant="standard"
          size="medium"
          icon="arrow-right-medium"
          title="Show key slides"
          onClick={() => {
            trackEvent?.("browser_mode_select", { element: "Show key slides" });
            setBrowserMode("keySlides");
          }}>
          <UIMCIcon slot="prefix" icon="arrow-right" />
          Show key slides
        </UIMCButton>
        <UIMCButton
          className="value-partnership-nav__action-button"
          variant="standard"
          size="medium"
          icon="arrow-right-medium"
          title="Show all presentations"
          onClick={() => {
            trackEvent?.("browser_mode_select", { element: "Show all presentations" });
            setBrowserMode("all");
          }}>
          <UIMCIcon slot="prefix" icon="arrow-right" />
          Show all presentations
        </UIMCButton>
      </>
    );
    return () => onActionsChange?.(null);
  }, [onActionsChange, trackEvent]);

  if (!partnerships) return null;

  const categories = selectedView === "departments" ? partnerships.buttons : partnerships.roles;

  const handleSelectPpt = (ppt, initialPage = 1) => {
    setOpenSlide({ ppt, initialPage });
    trackSlideOrStory?.(ppt.id || ppt.content, initialPage, { title: ppt.content || ppt.id });
  };

  return (
    <div className="partnerships-page">
      <div className="partnerships-page__header">
        <h1>{labels.valuePartnershipsHeader}</h1>
        <p>{labels.valuePartnershipsHeader2}</p>
      </div>

      {partnerships.image && (
        <div className="partnerships-page__hospital">
          <img src={partnerships.image} alt="" />
        </div>
      )}

      <CategoryMenu
        selectedView={selectedView}
        onViewChange={(view) => {
          trackEvent?.("toggle_view", {
            element: view === "departments" ? "Departments" : "Roles",
          });
          setSelectedView(view);
        }}
        categories={categories}
        onSelectCategory={(item) => {
          setSelectedCategory(item);
          trackEvent?.("category_select", { element: item.title });
        }}
        labels={labels}
      />

      {selectedCategory && (
        <CategoryOverlay
          category={selectedCategory}
          selectedView={selectedView}
          ppt={partnerships.ppt}
          onSelectPpt={(ppt) => handleSelectPpt(ppt, 1)}
          onClose={() => setSelectedCategory(null)}
        />
      )}

      {browserMode && (
        <PresentationBrowser
          mode={browserMode}
          hideUS={hideUS}
          onToggleHideUS={(checked) => {
            trackEvent?.("toggle_us_content", { payload: { hidden: checked } });
            setHideUS(checked);
          }}
          linkGroups={(hideUS ? partnershipsFilter : partnershipsFilterUS)?.groups || []}
          ppt={partnerships.ppt}
          keySlidesOverview={partnerships.keySlides.overview}
          keySlidesPpt={partnerships.keySlides.ppt}
          onSelectPpt={handleSelectPpt}
          onClose={() => {
            trackEvent?.("browser_close", { element: browserMode });
            setBrowserMode(null);
          }}
          onSwitchMode={() => {
            const nextMode = browserMode === "all" ? "keySlides" : "all";
            trackEvent?.("browser_mode_select", {
              element: nextMode === "keySlides" ? "Show key slides" : "Show all presentations",
            });
            setBrowserMode(nextMode);
          }}
        />
      )}

      {openSlide && (
        <SlideView
          key={openSlide.ppt.id || openSlide.ppt.content}
          ppt={openSlide.ppt}
          initialPage={openSlide.initialPage}
          labels={labels}
          onClose={() => {
            setOpenSlide(null);
          }}
        />
      )}
    </div>
  );
};

PartnershipsPage.propTypes = {
  onActionsChange: PropTypes.func,
};

// also default-exported (alongside the named export above, which the rest
// of the codebase's page components use) so ValuePartnership.jsx can
// React.lazy() it - see the comment there
export default PartnershipsPage;