"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 giphy_exports = {};
__export(giphy_exports, {
  Giphy: () => Giphy
});
module.exports = __toCommonJS(giphy_exports);
var import_react = __toESM(require("react"));
var import_ricos_context = require("./../../ricos-context/index.js");
var import_next_schema = require("./../../ricos-schema/next-schema/index.js");
var import_ui_components = require("./../../ui-components/index.js");
var import_data_hooks = require("../data-hooks.js");
var import_giphy_viewer_scss = __toESM(require("./giphy-viewer-scss.js"));
var import_play_icon = require("./play-icon.js");
var import_use_prefers_reduced_motion = require("./use-prefers-reduced-motion.js");
const Giphy = ({ componentData, nodeId }) => {
  const { width, height, gifType } = componentData;
  const { original } = componentData;
  const { tabIndex } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const isEditor = tabIndex === -1;
  const videoRef = import_react.default.useRef(null);
  const prefersReducedMotion = (0, import_use_prefers_reduced_motion.usePrefersReducedMotion)();
  const [isPlaying, setIsPlaying] = (0, import_react.useState)(() => !prefersReducedMotion);
  (0, import_react.useEffect)(() => {
    if (isEditor) {
      return;
    }
    setIsPlaying(!prefersReducedMotion);
    const video = videoRef.current;
    if (video && video.readyState >= HTMLMediaElement.HAVE_FUTURE_DATA) {
      prefersReducedMotion && isPlaying ? video.pause() : video.play();
    }
  }, [prefersReducedMotion]);
  const handleTogglePlay = () => {
    const video = videoRef.current;
    if (video) {
      video.paused ? video.play() : video.pause();
    }
    setIsPlaying((prev) => !prev);
  };
  const videoSrc = original?.mp4;
  if (videoSrc && gifType !== import_next_schema.GIFData_GIFType.STICKER) {
    return /* @__PURE__ */ import_react.default.createElement(InteractiveGifContainer, { isPlaying, onTogglePlay: handleTogglePlay }, /* @__PURE__ */ import_react.default.createElement(
      "video",
      {
        ref: videoRef,
        autoPlay: !prefersReducedMotion || isEditor,
        muted: true,
        loop: true,
        playsInline: true,
        "data-hook": getGifDatahook(isPlaying),
        className: import_giphy_viewer_scss.default.giphy_player,
        src: videoSrc
      }
    ));
  }
  const animatedSrc = !isPlaying && original?.still ? original.still : original?.gif;
  const isInfoForWixImageReady = nodeId !== void 0 && width !== void 0 && height !== void 0 && animatedSrc;
  if (isInfoForWixImageReady) {
    return /* @__PURE__ */ import_react.default.createElement(InteractiveGifContainer, { isPlaying, onTogglePlay: handleTogglePlay }, /* @__PURE__ */ import_react.default.createElement(
      import_ui_components.Image,
      {
        id: nodeId,
        containerId: `${nodeId}-parent`,
        "aria-label": "gif",
        height,
        width,
        containerProps: {
          className: import_giphy_viewer_scss.default.gifRatio,
          containerId: `${nodeId}-parent`,
          style: {
            "--dim-height": height,
            "--dim-width": width
          },
          dataHook: getGifDatahook(isPlaying)
        },
        displayMode: "fill",
        className: import_giphy_viewer_scss.default.giphy_player,
        uri: animatedSrc,
        alt: "gif"
      }
    ));
  }
  return /* @__PURE__ */ import_react.default.createElement(InteractiveGifContainer, { isPlaying, onTogglePlay: handleTogglePlay }, /* @__PURE__ */ import_react.default.createElement(
    "img",
    {
      "aria-label": "gif",
      className: import_giphy_viewer_scss.default.giphy_player,
      src: animatedSrc,
      alt: "gif",
      "data-hook": getGifDatahook(isPlaying)
    }
  ));
};
const getGifDatahook = (isPlaying) => `${import_data_hooks.ROOT} ${isPlaying ? "playing" : "paused"}`;
const InteractiveGifContainer = ({ isPlaying, onTogglePlay, children }) => {
  const { tabIndex } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const handleKeyDown = (0, import_react.useCallback)(
    (e) => {
      if (tabIndex === -1) {
        return;
      }
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onTogglePlay();
      }
    },
    [tabIndex, onTogglePlay]
  );
  const tabIndexProps = (0, import_react.useMemo)(() => {
    if (tabIndex === -1) {
      return {};
    }
    return {
      tabIndex,
      onClick: onTogglePlay,
      onKeyDown: handleKeyDown,
      ariaLabel: isPlaying ? "Pause gif" : "Play gif",
      role: "button"
    };
  }, [tabIndex, onTogglePlay, handleKeyDown, isPlaying]);
  return /* @__PURE__ */ import_react.default.createElement("div", { className: import_giphy_viewer_scss.default.giphyWrapper, ...tabIndexProps }, children, !isPlaying && /* @__PURE__ */ import_react.default.createElement("span", { className: import_giphy_viewer_scss.default.playIcon }, /* @__PURE__ */ import_react.default.createElement(import_play_icon.PlayIcon, null)));
};
//# sourceMappingURL=giphy.js.map
