"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var fullscreen_modal_exports = {};
__export(fullscreen_modal_exports, {
  FullscreenModal: () => FullscreenModal,
  default: () => fullscreen_modal_default
});
module.exports = __toCommonJS(fullscreen_modal_exports);
var import_lodash = __toESM(require("lodash"));
var import_pro_gallery = require("pro-gallery");
var import_pro_gallery_lib = require("pro-gallery-lib");
var import_react = __toESM(require("react"));
var import_react_dom = __toESM(require("react-dom"));
var import_focus_manager = require("./../../../_shared/focus-manager/focus-manager.js");
var import_convert_to_gallery_item = require("./../../../_shared/media/convert-to-gallery-item.js");
var import_fullscreen_resize_media_url = require("./../../../_shared/media/fullscreen-resize-media-url.js");
var import_data_hooks = require("./data-hooks.js");
var import_fullscreen_scss = __toESM(require("./fullscreen-scss.js"));
const FullscreenModal = ({
  container = document.body,
  ...props
}) => {
  const target = import_lodash.default.isFunction(container) ? container() : container;
  const fullscreen = /* @__PURE__ */ import_react.default.createElement(InnerFullscreen, { ...props });
  return target ? import_react_dom.default.createPortal(fullscreen, target) : fullscreen;
};
const InnerFullscreen = (props) => {
  const { backgroundColor = "white", foregroundColor = "#2F2E2E", isMobile, t } = props;
  const [isInFullscreen, setIsInFullscreen] = import_react.default.useState(false);
  const [closeButtonRef, setCloseButtonRef] = import_react.default.useState(null);
  const [size, setSize] = import_react.default.useState({ width: window.innerWidth, height: window.innerHeight });
  const items = props.images.map((item, index) => ({
    ...(0, import_convert_to_gallery_item.convertToGalleryItem)({ item, index }),
    disableDownload: item.disableDownload
  }));
  const containerRef = import_react.default.useRef(null);
  const currentIdx = import_react.default.useRef(props.index || 0);
  (0, import_react.useEffect)(() => {
    if (closeButtonRef && !isMobile) {
      setTimeout(() => {
        closeButtonRef.focus();
      }, 0);
    }
  }, [closeButtonRef]);
  const toggleFullscreenMode = () => {
    const element = document.body;
    if (document.fullscreenEnabled) {
      if (isInFullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      } else if (element.requestFullscreen) {
        element.requestFullscreen();
      }
    }
  };
  const onClose = () => {
    if (isInFullscreen) {
      toggleFullscreenMode();
    }
    props.onClose();
  };
  import_react.default.useEffect(() => {
    pauseChildNodesVideos(document);
    const onEsc = (event) => {
      if (event.key === "Escape") {
        onClose();
      }
    };
    const onWindowResize = () => setSize(getDimensions(containerRef.current));
    const onFullscreenChange = () => setIsInFullscreen(!!document.fullscreenElement);
    document.addEventListener("keydown", onEsc);
    window.addEventListener("resize", onWindowResize);
    if (document.fullscreenEnabled) {
      document.addEventListener("fullscreenchange", onFullscreenChange);
    }
    setSize(getDimensions(containerRef.current));
    return () => {
      document.removeEventListener("keydown", onEsc);
      window.removeEventListener("resize", onWindowResize);
      if (document.fullscreenEnabled) {
        document.removeEventListener("fullscreenchange", onFullscreenChange);
      }
    };
  }, []);
  const { width, height } = size;
  const isHorizontalView = width > height;
  const { arrowsPosition, slideshowInfoSize } = getStyleParams({
    isHorizontalView,
    isMobile,
    isInFullscreen
  });
  const infoElement = (itemProps) => {
    return itemProps.title ? /* @__PURE__ */ import_react.default.createElement("div", { className: import_fullscreen_scss.default.info_container }, /* @__PURE__ */ import_react.default.createElement("div", { title: itemProps.title, style: { color: foregroundColor }, className: import_fullscreen_scss.default.title }, itemProps.title)) : null;
  };
  const handleGalleryEvents = (name, data) => {
    if (name === "CURRENT_ITEM_CHANGED") {
      const previousItem = items[currentIdx.current];
      if (previousItem?.metaData?.type === "video") {
        pauseChildNodesVideos(
          document.querySelector(`[data-id='${previousItem.itemId}']`)
        );
      }
      currentIdx.current = data.idx;
    }
  };
  const closeButton = /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      ref: setCloseButtonRef,
      type: "button",
      className: import_fullscreen_scss.default.close,
      onClick: onClose,
      onKeyDown: applyOnEnterKeyPress(onClose),
      "aria-label": t("Fullscreen_Close_Button_AriaLabel"),
      "data-hook": import_data_hooks.FULLSCREEN_CLOSE_BUTTON
    },
    /* @__PURE__ */ import_react.default.createElement(CloseIcon, { backgroundColor, foregroundColor })
  );
  return /* @__PURE__ */ import_react.default.createElement(import_focus_manager.FocusManager, { jsdomMode: props.jsdomMode }, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      style: { background: backgroundColor },
      dir: "ltr",
      "data-hook": import_data_hooks.FULLSCREEN_ROOT,
      className: isInFullscreen || isMobile && isHorizontalView ? import_fullscreen_scss.default.fullscreen_mode : import_fullscreen_scss.default.expand_mode,
      ref: containerRef,
      onContextMenu: (e) => items[currentIdx.current].disableDownload && e.preventDefault(),
      role: "none"
    },
    /* @__PURE__ */ import_react.default.createElement("div", { "aria-label": `Gallery with ${items.length} items`, style: { height: "100%" } }, !isMobile && /* @__PURE__ */ import_react.default.createElement(
      FullscreenToggleButton,
      {
        isInFullscreen,
        backgroundColor,
        foregroundColor,
        onToggleFullscreen: toggleFullscreenMode,
        t
      }
    ), closeButton, /* @__PURE__ */ import_react.default.createElement(
      import_pro_gallery.ProGallery,
      {
        id: "ricos-fullscreen",
        scrollingElement: window,
        items,
        activeIndex: currentIdx.current,
        eventsListener: handleGalleryEvents,
        createMediaUrl: import_fullscreen_resize_media_url.fullscreenResizeMediaUrl,
        container: { width, height: isMobile ? height : height - 80 },
        options: {
          ...(0, import_pro_gallery_lib.migrateOptions)({
            ...fixedOptions,
            showArrows: !isMobile,
            arrowsPosition,
            slideshowInfoSize,
            behaviourParams_item_overlay_hoveringBehaviour: "NEVER_SHOW"
          }),
          layoutParams_info_height: 60
        },
        customComponents: {
          customImageRenderer,
          customInfoRenderer: !isInFullscreen ? infoElement : void 0
        },
        totalItemsCount: items.length,
        settings: { isAccessible: true },
        disableItemFocus: items.length === 1
      }
    ))
  ));
};
const getDimensions = (element) => {
  const container = element?.getBoundingClientRect?.();
  const width = container?.width || 0;
  const height = container?.height || 0;
  return { width, height };
};
const customImageRenderer = (itemProps) => {
  const {
    style,
    className,
    alt,
    tabIndex: _tabIndex,
    ...rest
  } = itemProps;
  return /* @__PURE__ */ import_react.default.createElement("div", { className, style, "data-hook": import_data_hooks.FULLSCREEN_IMAGE_ITEM }, /* @__PURE__ */ import_react.default.createElement("img", { className, alt, style, ...rest }));
};
const applyOnEnterKeyPress = (callback) => (e) => {
  if (e.key === "Enter") {
    callback();
  }
};
const FullscreenToggleButton = ({
  isInFullscreen,
  backgroundColor,
  foregroundColor,
  onToggleFullscreen,
  t
}) => {
  const Icon = isInFullscreen ? ShrinkIcon : ExpandIcon;
  return /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      type: "button",
      className: import_fullscreen_scss.default.expand_button,
      onClick: onToggleFullscreen,
      onKeyDown: applyOnEnterKeyPress(onToggleFullscreen),
      "aria-label": isInFullscreen ? t("Fullscreen_Shrink_Button_AriaLabel") : t("Fullscreen_Expand_Button_AriaLabel"),
      "data-hook": import_data_hooks.FULLSCREEN_TOGGLE_BUTTON
    },
    /* @__PURE__ */ import_react.default.createElement(Icon, { backgroundColor, foregroundColor })
  );
};
const pauseChildNodesVideos = (element) => Array.from(element.getElementsByTagName("video"))?.forEach((video) => video.pause());
const getStyleParams = ({
  isHorizontalView,
  isMobile,
  isInFullscreen
}) => {
  let arrowsPosition = 0;
  let slideshowInfoSize = 0;
  if (isMobile) {
    slideshowInfoSize = isHorizontalView ? 0 : 80;
  } else if (!isInFullscreen) {
    arrowsPosition = 1;
    slideshowInfoSize = 142;
  }
  return { arrowsPosition, slideshowInfoSize };
};
const fixedOptions = {
  galleryLayout: 5,
  cubeType: "fit",
  scrollSnap: true,
  videoPlay: "CLICK",
  videoLoop: false,
  videoSound: true,
  hidePlay: false,
  showVideoControls: true,
  showVideoPlayButton: true,
  allowSocial: false,
  loveButton: false,
  allowTitle: true,
  defaultShowInfoExpand: 1,
  floatingImages: 0,
  allowContextMenu: true
};
const CloseIcon = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: props.backgroundColor, d: "M0 0H60V60H0z" }), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    fill: props.foregroundColor,
    d: "M42.188 17l.812.813L30.812 30 43 42.188l-.813.812L30 30.812 17.812 43 17 42.187 29.187 30 17 17.812l.813-.812L30 29.187 42.188 17z"
  }
)));
const ExpandIcon = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: props.backgroundColor, d: "M0 0H60V60H0z" }), /* @__PURE__ */ import_react.default.createElement("g", { fill: props.foregroundColor }, /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M4.333 15.167H5.413V27.084H4.333z",
    transform: "translate(17 17) rotate(45 4.873 21.125)"
  }
), /* @__PURE__ */ import_react.default.createElement("path", { d: "M26 8h-1V1h-7V0h8v8z", transform: "translate(17 17)" }), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M20.583 -1.083H21.665999999999997V10.834H20.583z",
    transform: "translate(17 17) rotate(45 21.125 4.875)"
  }
), /* @__PURE__ */ import_react.default.createElement("path", { d: "M0 26v-8h1v7h7v1H0z", transform: "translate(17 17)" }))));
const ShrinkIcon = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60" }, /* @__PURE__ */ import_react.default.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: props.backgroundColor, d: "M0 0H60V60H0z" }), /* @__PURE__ */ import_react.default.createElement("g", { fill: props.foregroundColor }, /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M4.055 16.447H5.135V28.363999999999997H4.055z",
    transform: "translate(17 16) rotate(-135 4.595 22.405)"
  }
), /* @__PURE__ */ import_react.default.createElement("g", null, /* @__PURE__ */ import_react.default.createElement("path", { d: "M10 8.083H9v-7H2v-1h8v8z", transform: "translate(17 16) rotate(-180 13 5.458)" }), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M4.583 -1H5.666V10.917H4.583z",
    transform: "translate(17 16) rotate(-180 13 5.458) rotate(45 5.125 4.958)"
  }
)), /* @__PURE__ */ import_react.default.createElement("path", { d: "M9.468 17.53v8h-1v-7h-7v-1h8z", transform: "translate(17 16)" }))));
var fullscreen_modal_default = FullscreenModal;
//# sourceMappingURL=fullscreen-modal.js.map
