"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 component_exports = {};
__export(component_exports, {
  CollapsibleList: () => CollapsibleList,
  CollapsibleListItem: () => CollapsibleListItem,
  CollapsibleListItemBody: () => CollapsibleListItemBody,
  CollapsibleListItemTitle: () => CollapsibleListItemTitle
});
module.exports = __toCommonJS(component_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_toggle_quick_actions_modal = require("./../../ricos-common-plugins/quick-actions/toggle-quick-actions-modal/toggle-quick-actions-modal.js");
var import_ricos_content = require("./../../ricos-content/index.js");
var import_ricos_context = require("./../../ricos-context/index.js");
var import_next_schema = require("./../../ricos-schema/next-schema/index.js");
var import_tiptap = require("./../../tiptap/index.js");
var import_expand_collapse_button = require("../components/expand-collapse-button.js");
var import_new_pair_button = require("../components/new-pair-button.js");
var import_data_hooks = require("../data-hooks.js");
var import_icons = require("../icons/index.js");
var import_collapsible_list_component_scss = __toESM(require("../statics/styles/collapsible-list-component-scss.js"));
var import_collapsible_list_pair_scss = __toESM(require("../statics/styles/collapsible-list-pair-scss.js"));
var import_utils = require("./utils.js");
const FloatingAddPluginMenu = import_react.default.lazy(() => Promise.resolve().then(() => __toESM(require("./lazy-floating-add-plugin-menu.js"))));
const preventFocusJumpToFirstNode = (event) => {
  event.preventDefault();
  event.stopPropagation();
};
const CollapsibleList = ({
  editor,
  node,
  NodeViewContent,
  componentData,
  getPos
}) => {
  const { t, languageDir } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const editorQuery = (0, import_react.useContext)(import_ricos_context.EditorQueryContext);
  const pluginsEvents = (0, import_react.useContext)(import_ricos_context.PluginsEventsContext);
  const { isNodeSelected } = editorQuery.query;
  const styles = import_collapsible_list_component_scss.default;
  const pos = getPos();
  const [isCollapsibleListSelected, setIsCollapsibleListSelected] = (0, import_react.useState)(
    isNodeSelected(node.attrs.id)
  );
  const direction = componentData?.direction || languageDir;
  (0, import_react.useEffect)(() => {
    editor.on("selectionUpdate", handleSelectionUpdate);
    return () => {
      editor.off("selectionUpdate", handleSelectionUpdate);
    };
  }, []);
  (0, import_react.useEffect)(() => {
    if (!isCollapsibleListSelected) {
      pluginsEvents?.publishPluginLayoutShift({ nodeId: node.attrs.id });
    }
  }, [isCollapsibleListSelected]);
  const handleSelectionUpdate = () => {
    setIsCollapsibleListSelected(isNodeSelected(node.attrs.id));
  };
  const addNewPair = (e) => {
    e.preventDefault();
    e.stopPropagation();
    editor.commands.addCollapsibleListItem(pos + node.nodeSize);
  };
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)(styles[direction.toLowerCase()], styles.listDimensions),
      "data-hook": import_data_hooks.ROOT
    },
    /* @__PURE__ */ import_react.default.createElement(NodeViewContent, { className: (0, import_classnames.default)(styles[direction.toLowerCase()], styles.item) }),
    isCollapsibleListSelected && /* @__PURE__ */ import_react.default.createElement(
      import_new_pair_button.NewPairButton,
      {
        onClick: addNewPair,
        label: t("CollapsibleList_ShownText_Add_Placeholder")
      }
    )
  );
};
const CollapsibleListItem = ({ editor, node, NodeViewContent }) => {
  const styles = import_collapsible_list_pair_scss.default;
  const { t, languageDir } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const {
    adapter: { tiptapEditor }
  } = (0, import_react.useContext)(import_ricos_context.EditorContext);
  const $pos = editor.state.selection.$to;
  const inCollapsibleList = (0, import_utils.isInCollapsibleList)($pos, node.attrs.id);
  const isExpanded = !!node.attrs.isExpanded;
  const toggleCollapsibleItem = () => {
    tiptapEditor.chain().focus().toggleCollapsibleItem(node.attrs.id);
  };
  const [mouseDown, setMouseDown] = (0, import_react.useState)(false);
  const dir = (0, import_tiptap.findParentNodeClosestToPos)($pos, (node2) => node2.type.name === import_ricos_content.TIPTAP_COLLAPSIBLE_LIST_TYPE)?.node?.attrs?.direction || languageDir.toUpperCase();
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: styles.itemContainer,
      "data-hook": `${import_data_hooks.COLLAPSIBLE_LIST_ITEM} ${isExpanded ? "expanded" : "collapsed"}`
    },
    inCollapsibleList && // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: (0, import_classnames.default)(styles.dndIcon, styles[dir], mouseDown && styles.mouseDown),
        draggable: "true",
        contentEditable: "false",
        "data-drag-handle": true,
        onDragEnd: () => setMouseDown(false),
        onMouseUp: () => setMouseDown(false),
        onMouseDown: () => setMouseDown(true)
      },
      /* @__PURE__ */ import_react.default.createElement(import_icons.DndIcon, null)
    ),
    /* @__PURE__ */ import_react.default.createElement("div", { className: styles.expandIcon }, /* @__PURE__ */ import_react.default.createElement(
      import_expand_collapse_button.ExpandCollapseButton,
      {
        isExpanded,
        onClick: toggleCollapsibleItem,
        ariaLabel: isExpanded ? t("CollapsibleListPlugin_ExpandButton_AriaLabel") : t("CollapsibleListPlugin_CollapseButton_AriaLabel")
      }
    )),
    /* @__PURE__ */ import_react.default.createElement(NodeViewContent, { className: import_collapsible_list_pair_scss.default.innerEditor })
  );
};
const CollapsibleListItemTitle = ({ NodeViewContent }) => {
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)(
        import_collapsible_list_pair_scss.default.container,
        import_collapsible_list_pair_scss.default.titleContainer
      )
    },
    /* @__PURE__ */ import_react.default.createElement(
      NodeViewContent,
      {
        contentEditable: "true",
        className: import_collapsible_list_pair_scss.default.innerEditor,
        "data-hook": import_data_hooks.COLLAPSIBLE_LIST_ITEM_TITLE
      }
    )
  );
};
const CollapsibleListItemBody = ({
  NodeViewContent,
  editor,
  getPos,
  node
}) => {
  const $pos = editor.view.state.doc.resolve(getPos());
  const { languageDir, environment } = (0, import_react.useContext)(import_ricos_context.RicosContext);
  const modalService = (0, import_react.useContext)(import_ricos_context.ModalServiceContext) || {};
  const editorQuery = (0, import_react.useContext)(import_ricos_context.EditorQueryContext);
  const floatingAddPluginMenuWrapperRef = (0, import_react.useRef)(null);
  const isExpanded = (0, import_tiptap.findParentNodeClosestToPos)(
    $pos,
    (node2) => node2.type.name === import_ricos_content.TIPTAP_COLLAPSIBLE_ITEM_TYPE
  )?.node?.attrs?.isExpanded;
  const isFloatingMenuVisible = import_react.default.useCallback(() => {
    if (environment === "wixel") {
      return false;
    }
    const selectionContainsTitle = (() => {
      const nodes = editorQuery.selection().doc?.children?.[0]?.descendants(
        (node2) => node2.type() === import_ricos_content.TIPTAP_COLLAPSIBLE_ITEM_TITLE_TYPE
      );
      return nodes?.length > 0;
    })();
    const isCurrentNodeChildIsSingleTextBlock = (() => editorQuery.query.isChildSingleTextBlock(node.attrs.id))();
    return !selectionContainsTitle && isCurrentNodeChildIsSingleTextBlock;
  }, [node]);
  const dir = (0, import_tiptap.findParentNodeClosestToPos)(
    $pos,
    (node2) => node2.type.name === import_ricos_content.TIPTAP_COLLAPSIBLE_LIST_TYPE
  )?.node?.attrs?.direction?.toLowerCase() || languageDir;
  return isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react.Suspense, { fallback: /* @__PURE__ */ import_react.default.createElement("div", null) }, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: import_collapsible_list_pair_scss.default.floatingAddPluginMenuWrapper,
      ref: floatingAddPluginMenuWrapperRef,
      onClick: preventFocusJumpToFirstNode,
      onMouseDown: preventFocusJumpToFirstNode,
      onKeyDown: preventFocusJumpToFirstNode
    },
    /* @__PURE__ */ import_react.default.createElement(
      FloatingAddPluginMenu,
      {
        dir,
        supportedButtonIds: supportedPluginTypes,
        isVisible: isFloatingMenuVisible,
        nodeId: node.attrs.id,
        onClick: () => {
          (0, import_toggle_quick_actions_modal.toggleQuickActionsModal)({
            modalService,
            referenceElement: floatingAddPluginMenuWrapperRef.current,
            isMobile: false,
            supportedPlugins: supportedPluginTypes
          });
        }
      }
    )
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: import_collapsible_list_pair_scss.default.container }, /* @__PURE__ */ import_react.default.createElement(
    NodeViewContent,
    {
      contentEditable: "true",
      className: import_collapsible_list_pair_scss.default.innerEditor,
      "data-hook": import_data_hooks.COLLAPSIBLE_LIST_ITEM_BODY
    }
  ))) : null;
};
const supportedPluginTypes = [
  `${import_next_schema.Node_Type.AUDIO}.audio`,
  `${import_next_schema.Node_Type.AUDIO}.soundCloud`,
  `${import_next_schema.Node_Type.AUDIO}.spotify`,
  import_next_schema.Node_Type.FILE,
  import_next_schema.Node_Type.IMAGE,
  import_next_schema.Node_Type.GALLERY,
  `${import_next_schema.Node_Type.VIDEO}.video`,
  `${import_next_schema.Node_Type.VIDEO}.youTube`,
  import_next_schema.Node_Type.GIF,
  import_next_schema.Node_Type.DIVIDER,
  import_ricos_content.EMOJI_TYPE,
  import_next_schema.Node_Type.CODE_BLOCK,
  `${import_next_schema.Node_Type.APP_EMBED}.event`,
  `${import_next_schema.Node_Type.APP_EMBED}.booking`,
  `${import_next_schema.Node_Type.APP_EMBED}.product`,
  `${import_next_schema.Node_Type.LINK_PREVIEW}.instagram`,
  `${import_next_schema.Node_Type.LINK_PREVIEW}.twitter`,
  `${import_next_schema.Node_Type.LINK_PREVIEW}.pinterest`,
  `${import_next_schema.Node_Type.LINK_PREVIEW}.facebook`,
  `${import_next_schema.Node_Type.LINK_PREVIEW}.tiktok`
];
//# sourceMappingURL=component.js.map
