'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const utils$1 = require('../../../lib/utils.cjs');
const reactIcons_esm = require('../../../../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
const dropdownMenu = require('../../dropdown-menu.cjs');
const toolbarButton = require('./toolbar-button.cjs');
const shortcutKey = require('./shortcut-key.cjs');
const utils = require('../utils.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  const n = Object.create(null);
  if (e) {
    for (const k in e) {
      n[k] = e[k];
    }
  }
  n.default = e;
  return n;
}

const React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

const ToolbarSection = ({
  editor,
  actions,
  activeActions = actions.map((action) => action.value),
  mainActionCount = 0,
  dropdownIcon,
  dropdownTooltip = "More options",
  dropdownClassName = "w-12",
  size,
  variant
}) => {
  const { mainActions, dropdownActions } = React__namespace.useMemo(() => {
    const sortedActions = actions.filter((action) => activeActions.includes(action.value)).sort(
      (a, b) => activeActions.indexOf(a.value) - activeActions.indexOf(b.value)
    );
    return {
      mainActions: sortedActions.slice(0, mainActionCount),
      dropdownActions: sortedActions.slice(mainActionCount)
    };
  }, [actions, activeActions, mainActionCount]);
  const renderToolbarButton = React__namespace.useCallback(
    (action) => /* @__PURE__ */ jsxRuntime.jsx(
      toolbarButton.ToolbarButton,
      {
        onClick: () => action.action(editor),
        disabled: !action.canExecute(editor),
        isActive: action.isActive(editor),
        tooltip: `${action.label} ${action.shortcuts.map((s) => utils.getShortcutKey(s).symbol).join(" ")}`,
        "aria-label": action.label,
        size,
        variant,
        children: action.icon
      },
      action.label
    ),
    [editor, size, variant]
  );
  const renderDropdownMenuItem = React__namespace.useCallback(
    (action) => /* @__PURE__ */ jsxRuntime.jsxs(
      dropdownMenu.DropdownMenuItem,
      {
        onClick: () => action.action(editor),
        disabled: !action.canExecute(editor),
        className: utils$1.cn("flex flex-row items-center justify-between gap-4", {
          "bg-accent": action.isActive(editor)
        }),
        "aria-label": action.label,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grow", children: action.label }),
          /* @__PURE__ */ jsxRuntime.jsx(shortcutKey.ShortcutKey, { keys: action.shortcuts })
        ]
      },
      action.label
    ),
    [editor]
  );
  const isDropdownActive = dropdownActions.some(
    (action) => action.isActive(editor)
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
    mainActions.map(renderToolbarButton),
    dropdownActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
        toolbarButton.ToolbarButton,
        {
          isActive: isDropdownActive,
          tooltip: dropdownTooltip,
          "aria-label": dropdownTooltip,
          className: utils$1.cn("gap-0", dropdownClassName),
          size,
          variant,
          children: dropdownIcon || /* @__PURE__ */ jsxRuntime.jsx(reactIcons_esm.CaretDownIcon, { className: "size-5" })
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "start", className: "w-full", children: dropdownActions.map(renderDropdownMenuItem) })
    ] })
  ] });
};

exports.ToolbarSection = ToolbarSection;
exports.default = ToolbarSection;
