import PropTypes from "prop-types";
import { UIMCButton } from "@ui-marcom/react/button";
import { UIMCIcon } from "@ui-marcom/react/icon";
import "./PresentationBrowser.scss";

/**
 * Full-screen browse overlay, ported from value-slideview-filter.js (the old
 * "SlideViewFilter" - a misleading name, it has nothing to do with filtering
 * a single deck's slides). Two modes:
 * - "all": every presentation deck, grouped per content.valuePartnership's
 *   partnershipsFilterUS/partnershipsFilter link groups (hideUS picks which).
 * - "keySlides": a thumbnail grid of content.valuePartnership.partnerships
 *   .keySlides.overview, each opening its matching mini-deck from keySlides.ppt.
 *
 * @param {Object} props
 * @param {"all"|"keySlides"} props.mode
 * @param {boolean} props.hideUS - Accepted (per PartnershipsPage's `linkGroups` selection) but its own toggle switch is currently commented out below, so this is presently unused inside the component.
 * @param {function(boolean): void} props.onToggleHideUS - See `hideUS` - currently unused inside the component.
 * @param {Array} props.linkGroups - `content.valuePartnership.partnershipsFilterUS|Filter.groups`.
 * @param {Array} props.ppt - Full presentation-deck list (to resolve a link's ppt.id).
 * @param {Array} props.keySlidesOverview
 * @param {Array} props.keySlidesPpt
 * @param {function(Object, number=): void} props.onSelectPpt
 * @param {function(): void} props.onClose
 * @param {function(): void} props.onSwitchMode - Jumps to the other mode ("all" <-> "keySlides").
 */
export const PresentationBrowser = ({
  mode,
  linkGroups,
  ppt,
  keySlidesOverview,
  keySlidesPpt,
  onSelectPpt,
  onClose,
  onSwitchMode,
}) => {
  return (
    <div
      className={`presentation-browser${mode === "all" ? " presentation-browser--all-presentations" : ""}`}>
      <h1 className="presentation-browser__headline">
        {mode === "all" ? "All presentations" : "Key slides"}
      </h1>

      {mode === "all" ? (
        <div className={`presentation-browser__card`}>
          {/* <div className="presentation-browser__toggles">
            <UIMCToggleSwitch
              isChecked={hideUS}
              onChange={({ checked }) => onToggleHideUS(checked)}
            />
            <span>Hide US content</span>
          </div> */}

          <div className="presentation-browser__groups">
            {linkGroups.map((group) => (
              <div key={group.label} className="presentation-browser__group">
                <ul className="presentation-browser__link-list">
                  {group.options.map((option) => (
                    <li key={option.id}>
                      <a
                        href="#value-partnership/partnerships"
                        onClick={(e) => {
                          e.preventDefault();
                          const found = ppt.find((p) => p.id === option.id);
                          if (found) onSelectPpt(found);
                        }}>
                        <UIMCIcon icon="arrow-right-medium" size="small" />
                        {option.label}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="presentation-browser__key-slides">
          {keySlidesOverview.map((slide) => (
            <div
              key={slide.id}
              className="presentation-browser__key-slide"
              onClick={() => {
                const found = keySlidesPpt.find((k) => k.id === slide.id);
                if (found) onSelectPpt(found, 1);
              }}>
              <img src={slide.src} alt="" loading="lazy" />
              <p>{slide.title}</p>
            </div>
          ))}
        </div>
      )}

      <UIMCButton
        className="presentation-browser__switch-mode"
        variant="standard"
        title={mode === "all" ? "Show key slides" : "Show all presentations"}
        onClick={onSwitchMode}>
        <UIMCIcon slot="prefix" icon="arrow-right-medium" />
        {mode === "all" ? "Show key slides" : "Show all presentations"}
      </UIMCButton>

      <UIMCButton
        className="presentation-browser__close"
        variant="primary-content"
        title={mode === "all" ? "Close all presentations" : "Close key slides"}
        onClick={onClose}>
        <UIMCIcon slot="prefix" icon="close" />
        {mode === "all" ? "Close all presentations" : "Close key slides"}
      </UIMCButton>
    </div>
  );
};

PresentationBrowser.propTypes = {
  mode: PropTypes.oneOf(["all", "keySlides"]).isRequired,
  hideUS: PropTypes.bool.isRequired,
  onToggleHideUS: PropTypes.func.isRequired,
  linkGroups: PropTypes.array.isRequired,
  ppt: PropTypes.array.isRequired,
  keySlidesOverview: PropTypes.array.isRequired,
  keySlidesPpt: PropTypes.array.isRequired,
  onSelectPpt: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  onSwitchMode: PropTypes.func.isRequired,
};