import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { createPluginToolbarButton } from "./../../_shared/create-plugin-toolbar-button.js";
import { DropdownModal } from "./../../_shared/dropdown-modal/dropdown-modal.js";
import { ListItemSelect } from "./../../_shared/list-item-select/list-item-select.js";
import { FLOATING_PLUGIN_TOOLBAR } from "./../../toolbars-v3/index.js";
import { SmartBlockShapePickerModal } from "../components/smart-block-shape-picker-modal.js";
import { DATA_HOOKS } from "../data-hooks.js";
import { NumberedDropdownButton } from "./buttons/numbered-dropdown-button.js";
import {
  getSelectedMode,
  NUMBERED_MODE_OPTIONS,
  SMART_BLOCK_NUMBERED_DROPDOWN_ID
} from "./numbered-mode-options.js";
import { getSmartBlockNode, isLayoutSelectedAndNumberedVariants } from "./resolvers.js";
const createNumberedModeDropdownButton = ({ services }) => createPluginToolbarButton({
  id: "smartBlockNumbered",
  type: "dropdown",
  getIcon: ({ attributes }) => NUMBERED_MODE_OPTIONS[getSelectedMode(attributes.selectedNode)].icon,
  tooltip: "SmartBlock_Toolbar_Numbered_Mode_Tooltip",
  dataHook: DATA_HOOKS.NUMBERED_DROPDOWN_BUTTON,
  attributes: {
    selectedNode: getSmartBlockNode,
    visible: isLayoutSelectedAndNumberedVariants,
    active: (_, { modals }) => Boolean(modals?.getModal(SMART_BLOCK_NUMBERED_DROPDOWN_ID))
  },
  renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(NumberedDropdownButton, { toolbarItem }),
  // Cast NumberedModeDropdown so `getComponentProps` is typed with a factory `onSelect`,
  // matching the gallery-layout-btn pattern. The `command` resolves the factory before
  // passing to the modal, so at runtime the component still receives a plain callback.
  Component: NumberedModeDropdown,
  getComponentProps: ({ tiptapEditor, modals, attributes, t }) => {
    const selectedNode = attributes.selectedNode;
    const onSelect = ({ referenceElement }) => (mode) => {
      if (mode === "numbers") {
        tiptapEditor.commands.removeShapesFromAllCells();
        modals.closeModal(SMART_BLOCK_NUMBERED_DROPDOWN_ID);
        return;
      }
      modals.closeModal(SMART_BLOCK_NUMBERED_DROPDOWN_ID);
      modals.togglePluginPanel({
        id: DATA_HOOKS.CELL_SHAPE_PICKER,
        Component: SmartBlockShapePickerModal,
        componentProps: { blockMode: true },
        isMobile: services.context.isMobile,
        positioning: {
          referenceElement: referenceElement ?? void 0,
          placement: "right-start"
        }
      });
    };
    return {
      options: Object.entries(NUMBERED_MODE_OPTIONS).map(([id, option]) => ({
        id,
        dataHook: option.dataHook,
        text: t(option.labelKey),
        icon: option.icon,
        iconMobile: option.iconMobile
      })),
      onSelect,
      selectedId: getSelectedMode(selectedNode),
      closeModal: () => modals.closeModal(SMART_BLOCK_NUMBERED_DROPDOWN_ID)
    };
  },
  command: (props) => {
    const {
      modals,
      referenceElement,
      getComponentProps,
      tiptapEditor,
      attributes,
      publicCommands,
      isMobile
    } = props;
    const componentProps = getComponentProps?.({
      tiptapEditor,
      attributes,
      publicCommands,
      t: services.t,
      modals,
      languageDir: services.context.languageDir
    });
    if (!componentProps) {
      return;
    }
    if (modals.isModalOpen(SMART_BLOCK_NUMBERED_DROPDOWN_ID)) {
      modals.closeModal(SMART_BLOCK_NUMBERED_DROPDOWN_ID);
      return;
    }
    const toolbar = referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement;
    const resolvedOnSelect = componentProps.onSelect({ referenceElement: toolbar });
    modals.openModal({
      id: SMART_BLOCK_NUMBERED_DROPDOWN_ID,
      Component: NumberedModeDropdown,
      componentProps: { ...componentProps, onSelect: resolvedOnSelect },
      layout: isMobile ? "drawer" : "floating",
      positioning: { referenceElement, placement: "bottom" },
      type: "exclusive"
    });
  }
});
const NumberedModeDropdown = ({
  options,
  onSelect,
  selectedId,
  closeModal
}) => {
  const { t, isMobile } = useContext(RicosContext);
  return /* @__PURE__ */ React.createElement(
    DropdownModal,
    {
      title: t("SmartBlock_Toolbar_Numbered_Tooltip"),
      onCloseButtonClick: closeModal,
      options: options.map(({ id, dataHook, text, icon: Icon, iconMobile: IconMobile }) => /* @__PURE__ */ React.createElement(
        ListItemSelect,
        {
          key: id,
          dataHook,
          prefix: isMobile && IconMobile ? /* @__PURE__ */ React.createElement(IconMobile, null) : Icon ? /* @__PURE__ */ React.createElement(Icon, null) : null,
          title: text,
          selected: id === selectedId,
          onSelect: () => onSelect(id)
        }
      ))
    }
  );
};
export {
  createNumberedModeDropdownButton
};
//# sourceMappingURL=create-numbered-mode-dropdown-button.js.map
