import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { GIFData_GIFType } from "./../../ricos-schema/next-schema/index.js";
import { Image } from "./../../ui-components/index.js";
import { ROOT } from "../data-hooks.js";
import classes from "./giphy-viewer-scss.js";
import { PlayIcon } from "./play-icon.js";
import { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";
const Giphy = ({ componentData, nodeId }) => {
  const { width, height, gifType } = componentData;
  const { original } = componentData;
  const { tabIndex } = useContext(RicosContext);
  const isEditor = tabIndex === -1;
  const videoRef = React.useRef(null);
  const prefersReducedMotion = usePrefersReducedMotion();
  const [isPlaying, setIsPlaying] = useState(() => !prefersReducedMotion);
  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 !== GIFData_GIFType.STICKER) {
    return /* @__PURE__ */ React.createElement(InteractiveGifContainer, { isPlaying, onTogglePlay: handleTogglePlay }, /* @__PURE__ */ React.createElement(
      "video",
      {
        ref: videoRef,
        autoPlay: !prefersReducedMotion || isEditor,
        muted: true,
        loop: true,
        playsInline: true,
        "data-hook": getGifDatahook(isPlaying),
        className: classes.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__ */ React.createElement(InteractiveGifContainer, { isPlaying, onTogglePlay: handleTogglePlay }, /* @__PURE__ */ React.createElement(
      Image,
      {
        id: nodeId,
        containerId: `${nodeId}-parent`,
        "aria-label": "gif",
        height,
        width,
        containerProps: {
          className: classes.gifRatio,
          containerId: `${nodeId}-parent`,
          style: {
            "--dim-height": height,
            "--dim-width": width
          },
          dataHook: getGifDatahook(isPlaying)
        },
        displayMode: "fill",
        className: classes.giphy_player,
        uri: animatedSrc,
        alt: "gif"
      }
    ));
  }
  return /* @__PURE__ */ React.createElement(InteractiveGifContainer, { isPlaying, onTogglePlay: handleTogglePlay }, /* @__PURE__ */ React.createElement(
    "img",
    {
      "aria-label": "gif",
      className: classes.giphy_player,
      src: animatedSrc,
      alt: "gif",
      "data-hook": getGifDatahook(isPlaying)
    }
  ));
};
const getGifDatahook = (isPlaying) => `${ROOT} ${isPlaying ? "playing" : "paused"}`;
const InteractiveGifContainer = ({ isPlaying, onTogglePlay, children }) => {
  const { tabIndex } = useContext(RicosContext);
  const handleKeyDown = useCallback(
    (e) => {
      if (tabIndex === -1) {
        return;
      }
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onTogglePlay();
      }
    },
    [tabIndex, onTogglePlay]
  );
  const tabIndexProps = 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__ */ React.createElement("div", { className: classes.giphyWrapper, ...tabIndexProps }, children, !isPlaying && /* @__PURE__ */ React.createElement("span", { className: classes.playIcon }, /* @__PURE__ */ React.createElement(PlayIcon, null)));
};
export {
  Giphy
};
//# sourceMappingURL=giphy.js.map
