import { Tabs } from "@wix/design-system";
import React, { useContext, useState } from "react";
import { EditorContext, ModalServiceContext, RicosContext } from "./../../ricos-context/index.js";
import { Panel, PanelHeader } from "./../../ui-components/index.js";
import { GiphySelector } from "../components/giphy-selector.js";
import { INSERT_GIF_MODAL, INSERT_GIF_MODAL_GIF_TAB } from "../data-hooks.js";
import { GIPHY_TYPE } from "../types.js";
const GiphyInsertModal = ({
  activeTab = "gifs",
  nodeId,
  modalId,
  getGiphyUrl
}) => {
  const { t, isMobile, languageDir } = useContext(RicosContext);
  const { getPublicCommands } = useContext(EditorContext);
  const modalService = useContext(ModalServiceContext) || {};
  const [activeId, setActiveId] = useState(activeTab);
  const [modalContainerRef, setModalContainerRef] = React.useState(null);
  const closeModal = () => {
    modalService.closeModal(modalId);
  };
  const onGifAdd = (gif) => {
    const publicCommands = getPublicCommands();
    let insertGif = () => {
      publicCommands?.insertBlockWithBlankLines(GIPHY_TYPE, gif);
    };
    if (nodeId) {
      insertGif = () => {
        publicCommands?.setBlock(nodeId, GIPHY_TYPE, gif);
      };
    }
    setTimeout(insertGif, 50);
  };
  return /* @__PURE__ */ React.createElement(
    Panel,
    {
      closeButtonProps: { onClick: closeModal },
      width: isMobile ? "100%" : 430,
      height: isMobile ? "100%" : 576
    },
    /* @__PURE__ */ React.createElement(PanelHeader, { title: t("GiphyPlugin_InsertModal_Header_Title") }),
    /* @__PURE__ */ React.createElement("div", { dir: languageDir }, /* @__PURE__ */ React.createElement("div", { "data-hook": INSERT_GIF_MODAL, ref: setModalContainerRef }), /* @__PURE__ */ React.createElement(
      Tabs,
      {
        dataHook: INSERT_GIF_MODAL_GIF_TAB,
        size: "small",
        alignment: "center",
        type: "uniformFull",
        minWidth: 0,
        activeId,
        onClick: (value) => setActiveId(value.id),
        items: [
          { id: "gifs", title: t("GiphyPlugin_InsertModal_Gifs") },
          { id: "stickers", title: t("GiphyPlugin_InsertModal_Stickers") }
        ]
      }
    ), /* @__PURE__ */ React.createElement(
      GiphySelector,
      {
        key: activeId,
        onCloseRequested: closeModal,
        onGifAdd,
        getGiphyUrl,
        category: activeId,
        modalRef: modalContainerRef,
        modalId
      }
    ))
  );
};
export {
  GiphyInsertModal
};
//# sourceMappingURL=insert-modal.js.map
