import React from "react";
import { RICOS_FONT_SIZE_TYPE } from "./../../ricos-content/index.js";
import { Decoration_Type } from "./../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { createShortcut } from "./../../ricos-types/index.js";
import { createTextButton } from "./../../_shared/create-text-button.js";
import { getFontSizeInSelection } from "./../../_shared/resolvers/get-font-size-in-selection.js";
import { isAlwaysVisible } from "./../../_shared/resolvers/is-always-visible.js";
import { isNodeSelected } from "./../../_shared/resolvers/is-node-selected.js";
import { FontSizeButton } from "./../../toolbars-v3/components/buttons/FontSizeButton/font-size-button.js";
import { TEXT_BUTTON_FONT_SIZE } from "./data-hooks.js";
import { fontSize } from "./extension.js";
import { fontSizeConverter } from "./font-size-converter.js";
import { FontSizePanelComponent } from "./font-size-panel-component.js";
const FONT_SIZE_MODAL_ID = `${Decoration_Type.FONT_SIZE}.modal`;
const MAX_FONT_SIZE = 900;
const MIN_FONT_SIZE = 1;
const DEFAULT_FONTSIZE_DROPDOWN_OPTIONS = [
  "6",
  "8",
  "10",
  "12",
  "14",
  "16",
  "18",
  "20",
  "24",
  "30",
  "36",
  "48",
  "64",
  "72",
  "96"
];
const getFontSize = ({
  publicCommands
}) => {
  const currentFontSize = publicCommands.getFontSize() || "";
  return () => /* @__PURE__ */ React.createElement("div", null, currentFontSize);
};
const pluginFontSize = (config) => ({
  type: Decoration_Type.FONT_SIZE,
  config: {},
  pmNodeConverters: [],
  pmMarkConverters: [fontSizeConverter],
  tiptapExtensions: [fontSize(config)],
  shortcuts: [
    createShortcut({
      name: `${Decoration_Type.FONT_SIZE}.increase`,
      description: "ShortcutsSheet_Formatting_IncreaseFontSize",
      keys: { macOs: "Meta+Alt+.", windows: "Ctrl+Alt+." },
      command({ publicCommands }) {
        const currentFontSize = publicCommands.getFontSize();
        const newFontSize = currentFontSize && parseInt(currentFontSize, 10) + 1;
        if (newFontSize) {
          publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {
            fontSize: newFontSize.toString()
          });
        }
        return "continue";
      },
      group: "ShortcutsSheet_Section_Formatting",
      enabled: true,
      showInShortcutSheet: true
    }),
    createShortcut({
      name: `${Decoration_Type.FONT_SIZE}.decrease`,
      description: "ShortcutsSheet_Formatting_DecreaseFontSize",
      keys: { macOs: "Meta+Alt+,", windows: "Ctrl+Alt+," },
      command({ publicCommands }) {
        const currentFontSize = publicCommands.getFontSize();
        const newFontSize = currentFontSize && parseInt(currentFontSize, 10) - 1;
        if (newFontSize) {
          publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {
            fontSize: newFontSize.toString()
          });
        }
        return "continue";
      },
      group: "ShortcutsSheet_Section_Formatting",
      enabled: true,
      showInShortcutSheet: true
    })
  ],
  textButtons: [
    createTextButton({
      id: Decoration_Type.FONT_SIZE,
      type: "dropdown",
      presentation: {
        id: FONT_SIZE_MODAL_ID,
        dataHook: TEXT_BUTTON_FONT_SIZE,
        tooltip: "FormattingToolbar_CustomFontSizeButton_Tooltip",
        getIcon: getFontSize,
        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(FontSizeButton, { toolbarItem }),
        Component: FontSizePanelComponent,
        getComponentProps: ({ publicCommands, modals }) => {
          const selectedFontSize = publicCommands?.getFontSize() ?? "";
          const dropdownOptions = insertSorted(
            [...DEFAULT_FONTSIZE_DROPDOWN_OPTIONS],
            selectedFontSize
          );
          return {
            dropdownOptions: dropdownOptions.map((fontSize2) => ({
              id: fontSize2,
              dataHook: `font-size-dropdown-option-${fontSize2}`,
              label: fontSize2
            })),
            onSelect: (fontSize2) => {
              const fontSizeValue = Math.min(
                Math.max(MIN_FONT_SIZE, parseInt(fontSize2)),
                MAX_FONT_SIZE
              );
              publicCommands.insertDecoration(RICOS_FONT_SIZE_TYPE, {
                fontSize: `${fontSizeValue}`
              });
            },
            selectedId: selectedFontSize,
            closeModal: () => modals.closeModal(FONT_SIZE_MODAL_ID)
          };
        }
      },
      command: ({ modalService: modals, referenceElement, isMobile, componentProps }) => () => {
        if (!componentProps) {
          return false;
        }
        modals.isModalOpen(FONT_SIZE_MODAL_ID) ? modals.closeModal(FONT_SIZE_MODAL_ID) : modals.openModal({
          id: FONT_SIZE_MODAL_ID,
          Component: FontSizePanelComponent,
          componentProps,
          positioning: {
            placement: "bottom",
            referenceElement
          },
          layout: isMobile ? "drawer" : referenceElement ? "floating" : "dialog",
          returnFocusToEditor: true
        });
        return true;
      },
      attributes: {
        visible: isAlwaysVisible,
        selectedFontSize: getFontSizeInSelection,
        disabled: isNodeSelected
      }
    })
  ]
});
const insertSorted = (array, value) => {
  if (!array.includes(value) && value !== "") {
    array.push(value);
    array.sort((a, b) => parseInt(a) - parseInt(b));
  }
  return array;
};
export {
  DEFAULT_FONTSIZE_DROPDOWN_OPTIONS,
  pluginFontSize
};
//# sourceMappingURL=font-size.js.map
