import { DividerSizeMedium, Minus } from "@wix/wix-ui-icons-common";
import React from "react";
import { TIPTAP_DIVIDER_TYPE } from "./../ricos-content/index.js";
import { DividerData_Alignment, DividerData_Width } from "./../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { createPluginToolbarButton } from "./../_shared/create-plugin-toolbar-button.js";
import { PLUGIN_TOOLBAR_ALIGNMENT_BUTTON } from "./../_shared/data-hooks.js";
import { NODE_ALIGNMENT_BUTTONS } from "./../_shared/node-alignment-dropdown/consts.js";
import { NodeAlignmentDropdown } from "./../_shared/node-alignment-dropdown/node-alignment-dropdown.js";
import { createDeleteButton } from "./../_shared/plugin-toolbar/create-delete-button.js";
import { createSeparator } from "./../_shared/plugin-toolbar/separator/create-separator.js";
import { getNodeAlignment } from "./../_shared/resolvers/get-node-alignment.js";
import { getNodeInSelection } from "./../_shared/resolvers/get-node-in-selection.js";
import { isVisibleOnlyOnDesktop } from "./../_shared/resolvers/is-visible-only-on-desktop.js";
import { DIVIDER_BUTTONS } from "./const.js";
import {
  PLUGIN_TOOLBAR_DIVIDER_SIZE_BUTTON,
  PLUGIN_TOOLBAR_DIVIDER_STYLE_BUTTON
} from "./data-hooks.js";
import { DividerAlignmentButton } from "./toolbar/buttons/divider-alignment-button.js";
import {
  alignmentMap,
  dividerSizeData,
  dividerStyleData
} from "./toolbar/buttons/divider-buttons-data.js";
import { DividerSizeButton } from "./toolbar/buttons/divider-size-button.js";
import { DividerStyleButton } from "./toolbar/buttons/divider-style-button.js";
import { DividerSizePanel } from "./toolbar/modals/divider-size-panel.js";
import { LineStylePanel } from "./toolbar/modals/line-style-panel.js";
const resolveDividerAttribute = (attribute) => (content) => {
  if (Array.isArray(content) && content.length > 0) {
    return content.find((node) => node.type.name === TIPTAP_DIVIDER_TYPE)?.attrs?.[attribute];
  }
  return void 0;
};
const getToolbarButtons = (_config, services) => {
  const {
    context: { isMobile }
  } = services;
  const styleButton = createPluginToolbarButton({
    id: DIVIDER_BUTTONS.style,
    type: "dropdown",
    attributes: {
      nodeStyle: resolveDividerAttribute("lineStyle"),
      active: (_, { modals }) => Boolean(modals?.getModal(DIVIDER_BUTTONS.style))
    },
    dataHook: PLUGIN_TOOLBAR_DIVIDER_STYLE_BUTTON,
    tooltip: "DividerPlugin_SelectType_Tooltip",
    getIcon: ({ attributes }) => {
      return dividerStyleData.find(({ commandKey }) => commandKey === attributes.nodeStyle)?.icon || Minus;
    },
    command: ({
      modals,
      referenceElement,
      getComponentProps,
      tiptapEditor,
      attributes,
      publicCommands
    }) => {
      const componentProps = getComponentProps?.({
        tiptapEditor,
        attributes,
        publicCommands,
        t: services.t,
        modals,
        languageDir: services.context.languageDir
      });
      if (!componentProps) {
        return;
      }
      modals.isModalOpen(DIVIDER_BUTTONS.style) ? modals.closeModal(DIVIDER_BUTTONS.style) : modals.openModal({
        id: DIVIDER_BUTTONS.style,
        Component: LineStylePanel,
        componentProps,
        layout: isMobile ? "drawer" : "floating",
        positioning: { referenceElement, placement: "bottom" },
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (!referenceElement?.contains?.(e.target)) {
              modals.closeModal(DIVIDER_BUTTONS.style);
              return;
            }
          }
        }
      });
    },
    Component: LineStylePanel,
    getComponentProps: ({ tiptapEditor, modals, attributes, t }) => ({
      dropdownOptions: dividerStyleData.map((option) => ({
        id: option.commandKey,
        dataHook: option.dataHook,
        label: t(option.text),
        icon: option.iconSmall,
        iconMobile: option.icon
      })),
      onSelect: (lineStyle) => {
        tiptapEditor.chain().focus().updateAttributes(TIPTAP_DIVIDER_TYPE, {
          lineStyle
        }).run();
      },
      selectedId: attributes.nodeStyle || "SINGLE",
      closeModal: () => modals.closeModal(DIVIDER_BUTTONS.style)
    }),
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(DividerStyleButton, { toolbarItem, id: DIVIDER_BUTTONS.style })
  });
  const sizeButton = createPluginToolbarButton({
    id: DIVIDER_BUTTONS.size,
    type: "dropdown",
    attributes: {
      nodeSize: resolveDividerAttribute("width"),
      selectedNode: getNodeInSelection,
      visible: isVisibleOnlyOnDesktop(isMobile),
      active: (_, { modals }) => Boolean(modals?.getModal(DIVIDER_BUTTONS.size))
    },
    dataHook: PLUGIN_TOOLBAR_DIVIDER_SIZE_BUTTON,
    getIcon: ({ attributes }) => {
      const getSelectedSize = () => attributes.nodeSize || DividerData_Width.LARGE;
      const selectedSize = dividerSizeData.find(
        ({ commandKey }) => commandKey === getSelectedSize()
      );
      return selectedSize?.icon || DividerSizeMedium;
    },
    tooltip: "ButtonModal_Size_Section",
    command: ({
      modals,
      referenceElement,
      getComponentProps,
      tiptapEditor,
      attributes,
      publicCommands
    }) => {
      const componentProps = getComponentProps?.({
        tiptapEditor,
        attributes,
        publicCommands,
        t: services.t,
        modals,
        languageDir: services.context.languageDir
      });
      if (!componentProps) {
        return;
      }
      modals.isModalOpen(DIVIDER_BUTTONS.size) ? modals.closeModal(DIVIDER_BUTTONS.size) : modals.openModal({
        id: DIVIDER_BUTTONS.size,
        Component: DividerSizePanel,
        componentProps,
        layout: isMobile ? "drawer" : "floating",
        positioning: { referenceElement, placement: "bottom" },
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (!referenceElement?.contains?.(e.target)) {
              modals.closeModal(DIVIDER_BUTTONS.size);
              return;
            }
          }
        }
      });
    },
    Component: DividerSizePanel,
    getComponentProps: ({ tiptapEditor, modals, attributes, t }) => ({
      dropdownOptions: dividerSizeData.map((option) => ({
        id: option.commandKey,
        dataHook: option.dataHook,
        label: t(option.text),
        icon: option.iconSmall,
        iconMobile: option.icon
      })),
      onSelect: (value) => {
        const nodeContainerData = attributes.selectedNode.attrs?.containerData;
        const isFullWidth = value === DividerData_Width.LARGE;
        const newAttributes = isFullWidth ? {
          width: value,
          alignment: DividerData_Alignment.CENTER,
          containerData: {
            ...nodeContainerData,
            alignment: DividerData_Alignment.CENTER
          }
        } : { width: value };
        tiptapEditor.chain().focus().updateAttributes(TIPTAP_DIVIDER_TYPE, newAttributes).run();
      },
      selectedId: attributes.nodeSize || DividerData_Width.LARGE,
      closeModal: () => modals.closeModal(DIVIDER_BUTTONS.size)
    }),
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(DividerSizeButton, { toolbarItem })
  });
  const alignmentButton = createPluginToolbarButton({
    id: DIVIDER_BUTTONS.alignment,
    type: "dropdown",
    attributes: {
      nodeAlignment: getNodeAlignment,
      selectedNode: getNodeInSelection,
      visible: isVisibleOnlyOnDesktop(isMobile),
      active: (_, { modals }) => Boolean(modals?.getModal(DIVIDER_BUTTONS.alignment))
    },
    dataHook: PLUGIN_TOOLBAR_ALIGNMENT_BUTTON,
    tooltip: "TextAlignmentButton_Tooltip",
    getIcon: ({ services: services2, attributes }) => {
      const selectedAlignment = attributes.nodeAlignment || getDefaultAlignment(services2.context.languageDir);
      const SelectedAlignmentIcon = alignmentMap[selectedAlignment];
      return SelectedAlignmentIcon;
    },
    Component: NodeAlignmentDropdown,
    getComponentProps: ({ tiptapEditor, modals, attributes, t, languageDir }) => {
      return {
        closeModal: () => modals.closeModal(DIVIDER_BUTTONS.alignment),
        onSelect: (alignment) => {
          const nodeContainerData = attributes.selectedNode.attrs?.containerData;
          tiptapEditor.chain().focus().updateAttributes(TIPTAP_DIVIDER_TYPE, {
            alignment,
            containerData: { ...nodeContainerData, alignment }
          }).run();
        },
        selectedId: attributes.nodeAlignment || getDefaultAlignment(languageDir),
        options: Object.values(NODE_ALIGNMENT_BUTTONS).map((option) => ({
          type: option.type,
          id: option.commandKey,
          dataHook: option.dataHook,
          label: t(option.text),
          icon: option.iconSmall,
          iconMobile: option.icon
        }))
      };
    },
    command: ({
      tiptapEditor,
      modals,
      referenceElement,
      attributes,
      getComponentProps,
      publicCommands
    }) => {
      const componentProps = getComponentProps?.({
        tiptapEditor,
        attributes,
        publicCommands,
        t: services.t,
        modals,
        languageDir: services.context.languageDir
      });
      if (!componentProps) {
        return;
      }
      modals.isModalOpen(DIVIDER_BUTTONS.alignment) ? modals.closeModal(DIVIDER_BUTTONS.alignment) : modals.openModal({
        id: DIVIDER_BUTTONS.alignment,
        Component: NodeAlignmentDropdown,
        componentProps,
        layout: isMobile ? "drawer" : "floating",
        positioning: { referenceElement, placement: "bottom" },
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (!referenceElement?.contains?.(e.target)) {
              modals.closeModal(DIVIDER_BUTTONS.alignment);
              return;
            }
          }
        }
      });
    },
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(DividerAlignmentButton, { id: DIVIDER_BUTTONS.alignment, toolbarItem })
  });
  const separator = createSeparator();
  const deleteButton = createDeleteButton();
  if (services.context.environment === "wixel") {
    return [styleButton, sizeButton, alignmentButton, deleteButton];
  }
  return [styleButton, sizeButton, alignmentButton, separator, deleteButton];
};
const getDefaultAlignment = (langDir) => {
  return langDir === "rtl" ? "RIGHT" : "LEFT";
};
export {
  getToolbarButtons
};
//# sourceMappingURL=get-toolbar-buttons.js.map
