import {
  Add,
  ArrowLeft,
  ArrowLeftSmall,
  ArrowRight,
  ArrowRightSmall
} from "@wix/wix-ui-icons-common";
import React, { useContext } from "react";
import { TIPTAP_LAYOUT_CELL_TYPE } from "./../../ricos-content/index.js";
import { RicosContext } from "./../../ricos-context/index.js";
import { RicosPluginToolbarNames } from "./../../ricos-types/index.js";
import { createDeleteButton } from "./../../_shared/plugin-toolbar/create-delete-button.js";
import { createSeparator } from "./../../_shared/plugin-toolbar/separator/create-separator.js";
import { getNodeInSelection } from "./../../_shared/resolvers/get-node-in-selection.js";
import { isAlwaysVisible } from "./../../_shared/resolvers/is-always-visible.js";
import { ToolbarButton } from "./../../_shared/toolbar-button/toolbar-button.js";
import { NodeSelection } from "./../../tiptap/pm/state.js";
import { cellConverter } from "./cell-converter.js";
import { cellExtension } from "./cell-extension.js";
import {
  LAYOUT_CELL_TOOLBAR_ADD_CELL_DROPDOWN_BUTTON,
  LAYOUT_CELL_TOOLBAR_MOVE_LEFT_BUTTON,
  LAYOUT_CELL_TOOLBAR_MOVE_RIGHT_BUTTON
} from "./data-hooks.js";
import { getToolbarReferenceElement } from "./shared.js";
import { AddCellDropdownButton } from "./toolbar-buttons/add-cell-dropdown-button.js";
const pluginCell = (config = { showInQuickActions: false, showInToolbars: false }) => ({
  type: TIPTAP_LAYOUT_CELL_TYPE,
  config,
  pmMarkConverters: [],
  pmNodeConverters: [cellConverter],
  tiptapExtensions: [cellExtension],
  toolbar: {
    names: [RicosPluginToolbarNames.LAYOUT_CELL],
    resolveReferenceElement: (tiptapEditor) => getToolbarReferenceElement(tiptapEditor),
    getButtons: (_, services) => services.context.isMobile ? [] : config.showInQuickActions || config.showInToolbars ? [
      {
        id: "layoutCellAddCellDropdown",
        type: "toggle",
        dataHook: LAYOUT_CELL_TOOLBAR_ADD_CELL_DROPDOWN_BUTTON,
        tooltip: "Layouts_AddCell_Tooltip",
        icon: Add,
        command: ({ position, tiptapEditor, attributes: { selectedNode } }) => {
          if (position === "left") {
            tiptapEditor.commands.addCellLeft(selectedNode.attrs.id);
          } else {
            tiptapEditor.commands.addCellRight(selectedNode.attrs.id);
          }
        },
        attributes: {
          selectedNode: getNodeInSelection,
          alwaysVisible: isAlwaysVisible,
          canAddLeftCell: (_2, __, editor) => {
            const selection = editor?.state.selection;
            if (editor && selection instanceof NodeSelection) {
              const id = selection.node?.attrs.id;
              return editor.can().addCellLeft(id);
            }
            return false;
          },
          canAddRightCell: (_2, __, editor) => {
            const selection = editor?.state.selection;
            if (editor && selection instanceof NodeSelection) {
              const id = selection.node?.attrs.id;
              return editor.can().addCellRight(id);
            }
            return false;
          },
          disabled: (_2, __, editor) => {
            const selection = editor?.state.selection;
            if (editor && selection instanceof NodeSelection) {
              const id = selection.node?.attrs.id;
              return !editor.can().addCellLeft(id) && !editor.can().addCellRight(id);
            }
            return true;
          }
        },
        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(
          AddCellDropdownButton,
          {
            toolbarItem,
            attributes: toolbarItem.attributes
          }
        )
      },
      {
        id: "moveCellLeft",
        type: "toggle",
        dataHook: LAYOUT_CELL_TOOLBAR_MOVE_LEFT_BUTTON,
        tooltip: "Layouts_CellMoveLeft_Tooltip",
        icon: ArrowLeft,
        attributes: {
          alwaysVisible: isAlwaysVisible,
          disabled: (_2, __, editor) => {
            const selection = editor?.state.selection;
            if (editor && selection instanceof NodeSelection) {
              const id = selection.node?.attrs.id;
              return !editor.can().moveCellLeft(id);
            }
            return true;
          },
          selectedNode: getNodeInSelection
        },
        command: ({ tiptapEditor, attributes }) => {
          tiptapEditor.commands.moveCellLeft(attributes.selectedNode.attrs.id);
        },
        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(MoveCellLeftButton, { toolbarItem })
      },
      {
        id: "moveCellRight",
        type: "toggle",
        dataHook: LAYOUT_CELL_TOOLBAR_MOVE_RIGHT_BUTTON,
        tooltip: "Layouts_CellMoveRight_Tooltip",
        icon: ArrowRight,
        attributes: {
          selectedNode: getNodeInSelection,
          alwaysVisible: isAlwaysVisible,
          disabled: (_2, __, editor) => {
            const selection = editor?.state.selection;
            if (editor && selection instanceof NodeSelection) {
              const id = selection.node?.attrs.id;
              return !editor.can().moveCellRight(id);
            }
            return true;
          }
        },
        command: ({ tiptapEditor, attributes }) => {
          tiptapEditor.commands.moveCellRight(attributes.selectedNode.attrs.id);
        },
        renderer: (toolbarItem) => /* @__PURE__ */ React.createElement(MoveCellRightButton, { toolbarItem })
      },
      createSeparator(),
      createDeleteButton({
        tooltip: "Layouts_CellDelete_Tooltip",
        attributes: {
          selectedNode: getNodeInSelection
        },
        command: ({ tiptapEditor, attributes }) => {
          tiptapEditor.commands.deleteCell(attributes.selectedNode.attrs.id);
        }
      })
    ] : []
  }
});
const MoveCellLeftButton = ({ toolbarItem }) => {
  const { t } = useContext(RicosContext) || {};
  return /* @__PURE__ */ React.createElement(
    ToolbarButton,
    {
      prefix: ArrowLeftSmall,
      onClick: () => {
        toolbarItem.tiptapEditor.commands.moveCellLeft(
          toolbarItem.attributes.selectedNode.attrs.id
        );
      },
      dataHook: LAYOUT_CELL_TOOLBAR_MOVE_LEFT_BUTTON,
      tooltip: t("Layouts_CellMoveLeft_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
const MoveCellRightButton = ({ toolbarItem }) => {
  const { t } = useContext(RicosContext) || {};
  return /* @__PURE__ */ React.createElement(
    ToolbarButton,
    {
      prefix: ArrowRightSmall,
      onClick: () => {
        toolbarItem.tiptapEditor.commands.moveCellRight(
          toolbarItem.attributes.selectedNode.attrs.id
        );
      },
      dataHook: LAYOUT_CELL_TOOLBAR_MOVE_RIGHT_BUTTON,
      tooltip: t("Layouts_CellMoveRight_Tooltip"),
      tabIndex: toolbarItem.presentation.tabIndex
    }
  );
};
export {
  pluginCell
};
//# sourceMappingURL=plugin-cell.js.map
