import { useState } from "react";
import PropTypes from "prop-types";
import { UIMCButton } from "@ui-marcom/react/button";
import { UIMCIcon } from "@ui-marcom/react/icon";
import { UIMCControlButton } from "@ui-marcom/react/control-button";
import { UIMCToggleButtonSwitch } from "@ui-marcom/react/toggle-button-switch";
import { useAnalytics } from "../../../services/analytics/analytics";
import { useScreensaver } from "../../../services/screensaver";
import "./CategoryMenu.scss";

/**
 * "Choose a category" slide-in side panel, ported from
 * value-partnerships-page.js's .value-categories block: a Departments/Roles
 * switch plus the matching list of clickable category buttons
 * (content.partnerships.buttons or .roles). Same collapsible-drawer pattern
 * as GlobePage's ValueCheckboxPanel - see that component for why the
 * open/collapsed state is local UI state rather than a prop.
 *
 * @param {Object} props
 * @param {"departments"|"roles"} props.selectedView
 * @param {function(string): void} props.onViewChange
 * @param {Array<{id: string, title: string}>} props.categories - Buttons or roles for the current view.
 * @param {function(Object): void} props.onSelectCategory
 * @param {Object} props.labels
 */
export const CategoryMenu = ({
  selectedView,
  onViewChange,
  categories,
  onSelectCategory,
  labels,
}) => {
  const [isOpen, setIsOpen] = useState(true);
  const { trackEvent } = useAnalytics();
  const { showNow } = useScreensaver();

  return (
    <div className={`category-menu${isOpen ? "" : " category-menu--collapsed"}`}>
      <UIMCControlButton
        className="category-menu__toggle"
        variant="primary-content"
        size="medium"
        icon={isOpen ? "arrow-left-large" : "arrow-right-large"}
        title={isOpen ? "Collapse categories" : "Expand categories"}
        onClick={() => setIsOpen((open) => !open)}
      />

      <div className="category-menu__scroll">
        <div className="category-menu__header">
          <p>Choose a Category of Enterprise Solutions</p>
          <UIMCToggleButtonSwitch
            current={selectedView === "departments" ? 0 : 1}
            onChange={(index) => onViewChange(index === 0 ? "departments" : "roles")}
            className="category-menu__toggle-switch">
            <UIMCButton className="category-menu__toggle-switch-button">
              {labels.departments || "Clinical Focus Area"}
            </UIMCButton>
            <UIMCButton className="category-menu__toggle-switch-button">
              {labels.roles || "Roles"}
            </UIMCButton>
          </UIMCToggleButtonSwitch>
        </div>

        <div className="category-menu__items">
          {categories.map((item) => (
            <div
              key={item.id}
              className="category-menu__item"
              onClick={() => onSelectCategory(item)}>
              <span className="category-menu__item-title">{item.title}</span>
              <UIMCControlButton
                className="category-menu__item-button"
                icon="arrow-right-medium"
                title={item.title}
              />
            </div>
          ))}
        </div>
      </div>

      <div className="category-menu__footer">
        <UIMCButton
          className="category-menu__footer-button"
          variant="standard"
          title="Screensaver"
          onClick={() => {
            trackEvent?.("navigation_click", { element: "Screensaver" });
            showNow();
          }}>
          <UIMCIcon slot="prefix" icon="play" />
          Screensaver
        </UIMCButton>
      </div>
    </div>
  );
};

CategoryMenu.propTypes = {
  selectedView: PropTypes.oneOf(["departments", "roles"]).isRequired,
  onViewChange: PropTypes.func.isRequired,
  categories: PropTypes.arrayOf(
    PropTypes.shape({ id: PropTypes.string.isRequired, title: PropTypes.string.isRequired })
  ).isRequired,
  onSelectCategory: PropTypes.func.isRequired,
  labels: PropTypes.object.isRequired,
};