import React, { useContext, useState } from "react";
import { EMOJI_TYPE } from "./../../ricos-content/index.js";
import {
  EditorContext,
  ModalServiceContext,
  PluginsEventsContext,
  RicosContext
} from "./../../ricos-context/index.js";
import { Panel, PanelHeader } from "./../../ui-components/index.js";
import EmojiSelectorLazy from "../emoji-selector-lazy.js";
import { emojiModals } from "../types.js";
const EmojiInsertModal = () => {
  const { t, isMobile } = useContext(RicosContext);
  const { getPublicCommands } = useContext(EditorContext);
  const pluginsEvents = useContext(PluginsEventsContext);
  const modalService = useContext(ModalServiceContext) || {};
  const [panelRef, setPanelRef] = useState(null);
  const getAllFocusableInShadowDOM = () => {
    if (!panelRef) {
      return [];
    }
    const emojiPicker = panelRef.querySelector("em-emoji-picker");
    if (emojiPicker?.shadowRoot) {
      const focusableElements = emojiPicker.shadowRoot.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      return focusableElements.length > 0 ? Array.from(focusableElements) : [];
    }
    return [];
  };
  const getFirstFocusableElement = () => {
    if (!panelRef) {
      return null;
    }
    return panelRef.querySelector(
      '[data-hook~="sidePanel-header-close-button"]'
    );
  };
  const closeModal = () => {
    modalService?.closeModal(emojiModals.insert);
  };
  const onEmojiAdd = (emoji) => {
    getPublicCommands()?.insertText(emoji);
    pluginsEvents.publishPluginAddSuccess({ pluginId: EMOJI_TYPE, params: { emoji } });
    closeModal();
  };
  const handleKeyDown = (e) => {
    if (e.key === "Tab") {
      e.stopPropagation();
      const shadowElements = getAllFocusableInShadowDOM();
      const firstShadowElement = shadowElements[0];
      const lastShadowElement = shadowElements[shadowElements.length - 1];
      const firstElement = getFirstFocusableElement();
      const shadowActiveElement = panelRef?.querySelector("em-emoji-picker")?.shadowRoot?.activeElement;
      if (!firstElement) {
        return;
      }
      if (e.shiftKey) {
        if (shadowActiveElement === firstShadowElement) {
          firstElement.focus();
        } else if (document.activeElement === firstElement) {
          lastShadowElement.focus();
        }
        return;
      }
      if (document.activeElement === firstElement) {
        firstShadowElement.focus();
      } else if (shadowActiveElement === lastShadowElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
  };
  return (
    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ React.createElement("div", { ref: setPanelRef, onKeyDown: handleKeyDown }, /* @__PURE__ */ React.createElement(
      Panel,
      {
        closeButtonProps: { onClick: closeModal },
        width: isMobile ? "100%" : 352,
        height: "fit-content"
      },
      /* @__PURE__ */ React.createElement(PanelHeader, { title: t("EmojiPlugin_InsertModal_Title") }),
      /* @__PURE__ */ React.createElement(EmojiSelectorLazy, { onEmojiAdd })
    ))
  );
};
export {
  EmojiInsertModal
};
//# sourceMappingURL=insert-modal.js.map
