import { Edit, Height, Width } from "@wix/wix-ui-icons-common";
import React from "react";
import { TIPTAP_HTML_TYPE } from "./../ricos-content/index.js";
import { HTMLData_Source } from "./../ricos-schema/next-schema/index.js";
import { createDeleteButton } from "./../_shared/plugin-toolbar/create-delete-button.js";
import { createNodeAlignmentButton } from "./../_shared/plugin-toolbar/create-node-alignment-button.js";
import { createSeparator } from "./../_shared/plugin-toolbar/separator/create-separator.js";
import { getNodeInSelection } from "./../_shared/resolvers/get-node-in-selection.js";
import { FLOATING_PLUGIN_TOOLBAR } from "./../toolbars-v3/index.js";
import { HTML_BUTTONS, HTML_EDIT_MODAL_ID } from "./consts.js";
import {
  PLUGIN_TOOLBAR_CONTAINER_HEIGHT_BUTTON,
  PLUGIN_TOOLBAR_CONTAINER_WIDTH_BUTTON,
  PLUGIN_TOOLBAR_EDIT_HTML_BUTTON
} from "./data-hooks.js";
import { MAX_HEIGHT, MAX_WIDTH, MIN_HEIGHT, MIN_WIDTH } from "./defaults.js";
import { DimensionSliderButton } from "./toolbar/dimension-slider-button.js";
import { EditHtmlButton } from "./toolbar/edit-html-button.js";
import { InsertModal } from "./toolbar/insert-modal/insert-modal.js";
import { SliderModal } from "./toolbar/slider-modal.js";
const getToolbarButtons = (config, services) => {
  const {
    minHeight = MIN_HEIGHT,
    maxHeight = MAX_HEIGHT,
    maxWidth = MAX_WIDTH,
    minWidth = MIN_WIDTH
  } = config || {};
  const {
    modals,
    context: { isMobile }
  } = services;
  const editButton = {
    id: HTML_BUTTONS.edit,
    type: "modal",
    dataHook: PLUGIN_TOOLBAR_EDIT_HTML_BUTTON,
    icon: Edit,
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(EditHtmlButton, { id: HTML_EDIT_MODAL_ID, toolbarItem }),
    tooltip: "HtmlPlugin_EditHtml_Tooltip",
    attributes: {
      selectedNode: getNodeInSelection,
      active: (_, { modals: modals2 }) => Boolean(modals2?.getModal(HTML_EDIT_MODAL_ID)),
      visible: isEditableHtmlResolver
    },
    command: ({ attributes, modals: modals2, referenceElement }) => {
      const isModalOpen = modals2.isModalOpen(HTML_EDIT_MODAL_ID);
      isModalOpen ? modals2.closeModal(HTML_EDIT_MODAL_ID) : modals2.openModal({
        Component: InsertModal,
        id: HTML_EDIT_MODAL_ID,
        componentProps: {
          nodeId: attributes.selectedNode.attrs.id,
          closeModal: () => modals2.closeModal(HTML_EDIT_MODAL_ID)
        },
        layout: isMobile ? "fullscreen" : "floating",
        positioning: {
          referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement,
          placement: "right-start"
        },
        withTransition: true,
        noPadding: true,
        type: "exclusive",
        enableDrag: !isMobile,
        dragHandleSelector: "[data-drag-handler]",
        returnFocusToEditor: true,
        focusReturnElement: referenceElement ?? void 0,
        onClickOutside: {
          on: "pointerup",
          handler: (e) => {
            if (!referenceElement?.contains?.(e.target)) {
              modals2.closeModal(HTML_EDIT_MODAL_ID);
              return;
            }
          }
        }
      });
    }
  };
  const separator1 = createSeparator({
    visible: isEditableHtmlResolver
  });
  const widthButton = {
    id: HTML_BUTTONS.width,
    type: "modal",
    command: ({ tiptapEditor, referenceElement, attributes: { selectedNode } }) => {
      const { attrs } = selectedNode;
      const onChange = ({ value }) => {
        const changedData = {
          ...attrs,
          containerData: {
            ...attrs.containerData,
            width: {
              custom: value
            }
          }
        };
        setTimeout(() => {
          tiptapEditor.chain().updateAttributes(TIPTAP_HTML_TYPE, changedData).run();
        }, 0);
      };
      const componentProps = {
        onChange,
        closeModal: () => modals.closeModal(HTML_BUTTONS.width),
        min: minWidth,
        max: maxWidth,
        dimension: "width",
        nodeId: selectedNode.attrs.id
      };
      modals.togglePluginPanel({
        isMobile,
        id: HTML_BUTTONS.width,
        Component: SliderModal,
        componentProps,
        positioning: {
          referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement,
          placement: isMobile ? "bottom" : "right-start"
        },
        focusReturnElement: referenceElement,
        mobileLayout: "drawer"
      });
    },
    icon: Width,
    tooltip: "ChangeDimensions_Width_Tooltip",
    dataHook: PLUGIN_TOOLBAR_CONTAINER_WIDTH_BUTTON,
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(DimensionSliderButton, { toolbarItem, dimension: "width" }),
    attributes: {
      selectedNode: getNodeInSelection,
      active: (_, { modals: modals2 }) => Boolean(modals2?.getModal(HTML_BUTTONS.width))
    }
  };
  const heightButton = {
    id: HTML_BUTTONS.height,
    type: "modal",
    command: ({ tiptapEditor, referenceElement, attributes: { selectedNode } }) => {
      const { attrs } = selectedNode;
      const onChange = ({ value, autoHeight }) => {
        const changedData = {
          ...attrs,
          containerData: {
            ...attrs.containerData,
            height: {
              custom: value
            }
          },
          autoHeight
        };
        setTimeout(() => {
          tiptapEditor.chain().updateAttributes(TIPTAP_HTML_TYPE, changedData).run();
        }, 0);
      };
      const componentProps = {
        onChange,
        closeModal: () => modals.closeModal(HTML_BUTTONS.height),
        min: minHeight,
        max: maxHeight,
        dimension: "height",
        nodeId: selectedNode.attrs.id
      };
      modals.togglePluginPanel({
        isMobile,
        id: HTML_BUTTONS.height,
        Component: SliderModal,
        componentProps,
        positioning: {
          referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement,
          placement: isMobile ? "bottom" : "right-start"
        },
        focusReturnElement: referenceElement,
        mobileLayout: "drawer"
      });
    },
    icon: Height,
    tooltip: "ChangeDimensions_Height_Tooltip",
    dataHook: PLUGIN_TOOLBAR_CONTAINER_HEIGHT_BUTTON,
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(DimensionSliderButton, { toolbarItem, dimension: "height" }),
    attributes: {
      selectedNode: getNodeInSelection,
      active: (_, { modals: modals2 }) => Boolean(modals2?.getModal(HTML_BUTTONS.height))
    }
  };
  const alignmentButton = createNodeAlignmentButton({
    services,
    modalId: HTML_BUTTONS.alignment,
    attributes: {
      visible: (content) => {
        if (isMobile) {
          return false;
        }
        if (Array.isArray(content) && content.length > 0) {
          const source = content.find((node) => node.type.name === TIPTAP_HTML_TYPE)?.attrs?.source;
          return source !== HTMLData_Source.AI && source !== HTMLData_Source.AI_WIDGET;
        }
        return false;
      }
    }
  });
  const separator2 = createSeparator();
  const deleteButton = createDeleteButton();
  if (services.context.environment === "wixel") {
    return [editButton, widthButton, heightButton, alignmentButton, deleteButton];
  }
  return [
    editButton,
    separator1,
    widthButton,
    heightButton,
    alignmentButton,
    separator2,
    deleteButton
  ];
};
const isEditableHtmlResolver = (content) => {
  if (Array.isArray(content) && content.length > 0) {
    const source = content.find((node) => node.type.name === TIPTAP_HTML_TYPE)?.attrs?.source;
    return source !== HTMLData_Source.AI && source !== HTMLData_Source.AI_WIDGET;
  }
  return false;
};
export {
  getToolbarButtons
};
//# sourceMappingURL=get-toolbar-buttons.js.map
