import { LayoutGallery, ManagePhotos } from "@wix/wix-ui-icons-common";
import React from "react";
import { TIPTAP_GALLERY_TYPE } from "./../ricos-content/index.js";
import { Node_Type } from "./../ricos-schema/legacy/wix/rich_content/v1/index.js";
import { GalleryOptions_Layout_Type } from "./../ricos-schema/next-schema/index.js";
import { createPluginToolbarButton } from "./../_shared/create-plugin-toolbar-button.js";
import { LINK_MODAL_ID } from "./../_shared/link-modal/constants.js";
import { MODAL_ROOT } from "./../_shared/link-modal/data-hooks/data-hooks.js";
import { createDeleteButton } from "./../_shared/plugin-toolbar/create-delete-button.js";
import { createNodeAlignmentButton } from "./../_shared/plugin-toolbar/create-node-alignment-button.js";
import { createSettingsButton } from "./../_shared/plugin-toolbar/create-settings-button.js";
import { createNodeSizeButton } from "./../_shared/plugin-toolbar/node-size-button/create-node-size-button.js";
import { createSeparator } from "./../_shared/plugin-toolbar/separator/create-separator.js";
import { getNodeInSelection } from "./../_shared/resolvers/get-node-in-selection.js";
import { handleGalleryUpload } from ".//handle-gallery-upload.js";
import { FLOATING_PLUGIN_TOOLBAR } from "./../toolbars-v3/index.js";
import {
  GALLERY_LAYOUT_DROPDOWN,
  GALLERY_LAYOUT_SETTINGS_MODAL,
  GALLERY_MEDIA_SETTINGS_MODAL,
  GALLERY_SETTINGS_MODAL_ID,
  SETTINGS_TAB,
  fileInputAccept
} from "./consts.js";
import {
  LAYOUT_DROPDOWN_OPTION,
  LAYOUT_DROPDOWN_OPTION_CUSTOMIZE_LAYOUT,
  PLUGIN_TOOLBAR_LAYOUT_DROPDOWN_BUTTON,
  PLUGIN_TOOLBAR_MANAGE_MEDIA_BUTTON
} from "./data-hooks.js";
import { layoutRicosData } from "./layout-data-provider.js";
import { GallerySettingsModal } from "./modals/settings/index.js";
import { GalleryLayoutButton } from "./toolbar/buttons/gallery-layout-button.js";
import { GalleryManageMediaButton } from "./toolbar/buttons/gallery-manage-media-button.js";
import {
  CUSTOMIZE_LAYOUT_OPTION_ID,
  LAYOUT_DROPDOWN_OPTIONS,
  LayoutDropdown
} from "./toolbar/layout-dropdown.js";
const selectedLayoutResolver = (content) => {
  const galleryNode = Array.isArray(content) && content.find((node) => node.type.name === Node_Type.GALLERY);
  if (!galleryNode) {
    return void 0;
  }
  return galleryNode.attrs.options?.layout.type;
};
const isValidIndex = (index) => typeof index === "number" && index >= 0;
const GALLERY_TOOLBAR_BUTTON_IDS = {
  MANAGE_MEDIA: "manage-media-btn",
  LAYOUT: "gallery-layout-btn"
};
const getToolbarButtons = (config, services) => {
  const { accept = fileInputAccept } = config;
  const { isMobile } = services?.context ?? {};
  const { modals } = services;
  const toggleSettingsModal = ({
    modalId,
    node,
    referenceElement,
    activeTab,
    publicCommands
  }) => {
    if (modals?.isModalOpen(modalId)) {
      modals?.closeModal(modalId);
      return;
    }
    modals?.openModal({
      id: modalId,
      Component: GallerySettingsModal,
      withTransition: true,
      enableDrag: !isMobile,
      dragHandleSelector: "[data-drag-handler]",
      layout: isMobile ? "fullscreen" : "floating",
      componentProps: {
        nodeId: node.attrs.id,
        modalId,
        onFileSelect: (index) => {
          handleGalleryUpload({
            publicCommands,
            services,
            config,
            nodeId: node.attrs.id,
            fileState: isValidIndex(index) ? { itemIndex: index } : void 0,
            referenceElement
          });
        },
        accept,
        activeTab
      },
      positioning: {
        referenceElement: referenceElement?.closest(`[data-hook~=${FLOATING_PLUGIN_TOOLBAR}]`) ?? referenceElement,
        placement: "right-start"
      },
      focusReturnElement: referenceElement,
      disableArrowNavigation: true,
      onClickOutside: {
        on: "pointerup",
        handler: (e) => {
          if (e.target instanceof Element && e.target?.closest?.(`[data-hook~=${MODAL_ROOT}]`) !== null) {
            return;
          }
          if (modals.getModal(LINK_MODAL_ID)) {
            modals.closeModal(LINK_MODAL_ID);
          }
          if (referenceElement?.contains?.(e.target)) {
            return;
          }
          modals.closeModal(modalId);
        }
      }
    });
  };
  const manageMediaButton = {
    id: GALLERY_TOOLBAR_BUTTON_IDS.MANAGE_MEDIA,
    type: "modal",
    dataHook: PLUGIN_TOOLBAR_MANAGE_MEDIA_BUTTON,
    icon: ManagePhotos,
    tooltip: "ManageMediaButton_Tooltip",
    label: "GallerySettings_Toolbar_Button_MangeMedia",
    command: ({ referenceElement, attributes: { selectedNode }, publicCommands }) => {
      toggleSettingsModal({
        modalId: GALLERY_MEDIA_SETTINGS_MODAL,
        node: selectedNode,
        referenceElement,
        activeTab: SETTINGS_TAB.design,
        publicCommands
      });
    },
    attributes: {
      selectedNode: getNodeInSelection,
      active: (_, { modals: modals2 }) => Boolean(modals2?.getModal(GALLERY_MEDIA_SETTINGS_MODAL))
    },
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(GalleryManageMediaButton, { toolbarItem })
  };
  const separator = createSeparator();
  const nodeSizeButton = createNodeSizeButton({
    services,
    modalId: "size"
  });
  const nodeAlignmentButton = createNodeAlignmentButton({ services, modalId: "alignment" });
  const layoutButton = createPluginToolbarButton({
    id: GALLERY_TOOLBAR_BUTTON_IDS.LAYOUT,
    type: "dropdown",
    dataHook: PLUGIN_TOOLBAR_LAYOUT_DROPDOWN_BUTTON,
    getIcon: ({ attributes }) => {
      const selectedLayout = LAYOUT_DROPDOWN_OPTIONS[attributes.layout] || LAYOUT_DROPDOWN_OPTIONS[GalleryOptions_Layout_Type.GRID];
      return selectedLayout.icon || LayoutGallery;
    },
    label: "GalleryPlugin_Layout_Select_Label",
    tooltip: "GalleryPlugin_Layout_Select_Tooltip",
    Component: LayoutDropdown,
    getComponentProps: ({ tiptapEditor, attributes, publicCommands, t }) => {
      return {
        options: [
          ...Object.entries(LAYOUT_DROPDOWN_OPTIONS).map(
            ([layout, { icon: Icon, iconSmall: IconSmall, text }]) => ({
              id: layout,
              text: t(text),
              dataHook: `${LAYOUT_DROPDOWN_OPTION}${layout}`,
              iconMobile: Icon,
              icon: IconSmall
            })
          ),
          {
            id: CUSTOMIZE_LAYOUT_OPTION_ID,
            text: t("GalleryPlugin_Layouts_Customize_Button"),
            dataHook: LAYOUT_DROPDOWN_OPTION_CUSTOMIZE_LAYOUT
          }
        ],
        onSelect: ({ referenceElement }) => (layout) => {
          if (layout === CUSTOMIZE_LAYOUT_OPTION_ID) {
            toggleSettingsModal({
              modalId: GALLERY_LAYOUT_SETTINGS_MODAL,
              node: attributes.selectedNode,
              referenceElement: referenceElement ?? void 0,
              activeTab: SETTINGS_TAB.layout,
              publicCommands
            });
            return;
          }
          const {
            selection: { anchor: pos }
          } = tiptapEditor.state;
          tiptapEditor.chain().focus().updateAttributes(TIPTAP_GALLERY_TYPE, {
            options: layoutRicosData[layout]
          }).run();
          setTimeout(() => tiptapEditor.chain().focus().setNodeSelection(pos).run(), 50);
        },
        selectedId: attributes?.layout ?? GalleryOptions_Layout_Type.GRID,
        closeModal: () => modals?.closeModal(GALLERY_LAYOUT_DROPDOWN)
      };
    },
    command: ({
      referenceElement,
      attributes,
      publicCommands,
      getComponentProps,
      tiptapEditor
    }) => {
      if (modals?.isModalOpen(GALLERY_LAYOUT_DROPDOWN)) {
        modals?.closeModal(GALLERY_LAYOUT_DROPDOWN);
        return;
      }
      if (modals?.isModalOpen(GALLERY_LAYOUT_SETTINGS_MODAL)) {
        modals?.closeModal(GALLERY_LAYOUT_SETTINGS_MODAL);
      }
      const componentProps = getComponentProps?.({
        tiptapEditor,
        attributes,
        publicCommands,
        t: services.t,
        modals,
        languageDir: services.context.languageDir
      });
      if (!componentProps) {
        return;
      }
      modals?.openModal({
        id: GALLERY_LAYOUT_DROPDOWN,
        Component: LayoutDropdown,
        componentProps: {
          options: componentProps.options,
          onSelect: componentProps.onSelect({
            referenceElement: referenceElement || null
          }),
          selectedId: componentProps.selectedId,
          closeModal: componentProps.closeModal
        },
        layout: isMobile ? "drawer" : "floating",
        positioning: { referenceElement, placement: "bottom" }
      });
    },
    attributes: {
      layout: selectedLayoutResolver,
      selectedNode: getNodeInSelection,
      active: (_, { modals: modals2 }) => Boolean(modals2?.getModal(GALLERY_LAYOUT_DROPDOWN)) || Boolean(modals2?.getModal(GALLERY_LAYOUT_SETTINGS_MODAL))
    },
    renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(GalleryLayoutButton, { toolbarItem })
  });
  const settingsButton = createSettingsButton({
    modalId: GALLERY_SETTINGS_MODAL_ID,
    command: ({ referenceElement, attributes: { selectedNode }, publicCommands }) => {
      toggleSettingsModal({
        modalId: GALLERY_SETTINGS_MODAL_ID,
        node: selectedNode,
        referenceElement,
        activeTab: SETTINGS_TAB.settings,
        publicCommands
      });
    }
  });
  const deleteButton = createDeleteButton();
  return services.context.environment === "wixel" ? [
    manageMediaButton,
    settingsButton,
    layoutButton,
    nodeSizeButton,
    nodeAlignmentButton,
    deleteButton
  ] : [
    manageMediaButton,
    separator,
    nodeSizeButton,
    nodeAlignmentButton,
    layoutButton,
    settingsButton,
    separator,
    deleteButton
  ];
};
export {
  getToolbarButtons
};
//# sourceMappingURL=get-toolbar-buttons.js.map
