import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as React from 'react';
import { cn } from '../../../lib/utils.mjs';
import { CaretDownIcon } from '../../../../../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.mjs';
import { DropdownMenuItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '../../dropdown-menu.mjs';
import { ToolbarButton } from './toolbar-button.mjs';
import { ShortcutKey } from './shortcut-key.mjs';
import { getShortcutKey } from '../utils.mjs';

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.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.useCallback(
    (action) => /* @__PURE__ */ jsx(
      ToolbarButton,
      {
        onClick: () => action.action(editor),
        disabled: !action.canExecute(editor),
        isActive: action.isActive(editor),
        tooltip: `${action.label} ${action.shortcuts.map((s) => getShortcutKey(s).symbol).join(" ")}`,
        "aria-label": action.label,
        size,
        variant,
        children: action.icon
      },
      action.label
    ),
    [editor, size, variant]
  );
  const renderDropdownMenuItem = React.useCallback(
    (action) => /* @__PURE__ */ jsxs(
      DropdownMenuItem,
      {
        onClick: () => action.action(editor),
        disabled: !action.canExecute(editor),
        className: cn("flex flex-row items-center justify-between gap-4", {
          "bg-accent": action.isActive(editor)
        }),
        "aria-label": action.label,
        children: [
          /* @__PURE__ */ jsx("span", { className: "grow", children: action.label }),
          /* @__PURE__ */ jsx(ShortcutKey, { keys: action.shortcuts })
        ]
      },
      action.label
    ),
    [editor]
  );
  const isDropdownActive = dropdownActions.some(
    (action) => action.isActive(editor)
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    mainActions.map(renderToolbarButton),
    dropdownActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
        ToolbarButton,
        {
          isActive: isDropdownActive,
          tooltip: dropdownTooltip,
          "aria-label": dropdownTooltip,
          className: cn("gap-0", dropdownClassName),
          size,
          variant,
          children: dropdownIcon || /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-5" })
        }
      ) }),
      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-full", children: dropdownActions.map(renderDropdownMenuItem) })
    ] })
  ] });
};

export { ToolbarSection, ToolbarSection as default };
