import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { cn } from '../../../../lib/utils.mjs';
import { LetterCaseCapitalizeIcon, 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';

const formatActions = [
  {
    label: "Normal Text",
    element: "span",
    className: "grow",
    shortcuts: ["mod", "alt", "0"]
  },
  {
    label: "Heading 1",
    element: "h1",
    level: 1,
    className: "m-0 grow text-3xl font-extrabold",
    shortcuts: ["mod", "alt", "1"]
  },
  {
    label: "Heading 2",
    element: "h2",
    level: 2,
    className: "m-0 grow text-xl font-bold",
    shortcuts: ["mod", "alt", "2"]
  },
  {
    label: "Heading 3",
    element: "h3",
    level: 3,
    className: "m-0 grow text-lg font-semibold",
    shortcuts: ["mod", "alt", "3"]
  },
  {
    label: "Heading 4",
    element: "h4",
    level: 4,
    className: "m-0 grow text-base font-semibold",
    shortcuts: ["mod", "alt", "4"]
  },
  {
    label: "Heading 5",
    element: "h5",
    level: 5,
    className: "m-0 grow text-sm font-normal",
    shortcuts: ["mod", "alt", "5"]
  },
  {
    label: "Heading 6",
    element: "h6",
    level: 6,
    className: "m-0 grow text-sm font-normal",
    shortcuts: ["mod", "alt", "6"]
  }
];
const SectionOne = ({
  editor,
  activeLevels = [1, 2, 3, 4, 5, 6],
  size,
  variant
}) => {
  const filteredActions = React.useMemo(
    () => formatActions.filter(
      (action) => !action.level || activeLevels.includes(action.level)
    ),
    [activeLevels]
  );
  const handleStyleChange = React.useCallback(
    (level) => {
      if (level) {
        editor.chain().focus().toggleHeading({ level }).run();
      } else {
        editor.chain().focus().setParagraph().run();
      }
    },
    [editor]
  );
  const renderMenuItem = React.useCallback(
    ({ label, element: Element, level, className, shortcuts }) => /* @__PURE__ */ jsxs(
      DropdownMenuItem,
      {
        onClick: () => handleStyleChange(level),
        className: cn("flex flex-row items-center justify-between gap-4", {
          "bg-accent": level ? editor.isActive("heading", { level }) : editor.isActive("paragraph")
        }),
        "aria-label": label,
        children: [
          /* @__PURE__ */ jsx(Element, { className, children: label }),
          /* @__PURE__ */ jsx(ShortcutKey, { keys: shortcuts })
        ]
      },
      label
    ),
    [editor, handleStyleChange]
  );
  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      ToolbarButton,
      {
        isActive: editor.isActive("heading"),
        tooltip: "Text styles",
        "aria-label": "Text styles",
        pressed: editor.isActive("heading"),
        disabled: editor.isActive("codeBlock"),
        size,
        variant,
        className: "gap-0",
        children: [
          /* @__PURE__ */ jsx(LetterCaseCapitalizeIcon, { className: "size-5" }),
          /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-5" })
        ]
      }
    ) }),
    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-full", children: filteredActions.map(renderMenuItem) })
  ] });
};
SectionOne.displayName = "SectionOne";

export { SectionOne, SectionOne as default };
