import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { CheckIcon, 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 { ToolbarButton } from '../toolbar-button.mjs';
import { Popover, PopoverTrigger, PopoverContent } from '../../../popover.mjs';
import { ToggleGroupItem, ToggleGroup } from '../../../toggle-group.mjs';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../../tooltip.mjs';
import { useTheme } from '../../hooks/use-theme.mjs';

const COLORS = [
  {
    label: "Palette 1",
    inverse: "hsl(var(--background))",
    colors: [
      { cssVar: "hsl(var(--foreground))", label: "Default" },
      { cssVar: "var(--mt-accent-bold-blue)", label: "Bold blue" },
      { cssVar: "var(--mt-accent-bold-teal)", label: "Bold teal" },
      { cssVar: "var(--mt-accent-bold-green)", label: "Bold green" },
      { cssVar: "var(--mt-accent-bold-orange)", label: "Bold orange" },
      { cssVar: "var(--mt-accent-bold-red)", label: "Bold red" },
      { cssVar: "var(--mt-accent-bold-purple)", label: "Bold purple" }
    ]
  },
  {
    label: "Palette 2",
    inverse: "hsl(var(--background))",
    colors: [
      { cssVar: "var(--mt-accent-gray)", label: "Gray" },
      { cssVar: "var(--mt-accent-blue)", label: "Blue" },
      { cssVar: "var(--mt-accent-teal)", label: "Teal" },
      { cssVar: "var(--mt-accent-green)", label: "Green" },
      { cssVar: "var(--mt-accent-orange)", label: "Orange" },
      { cssVar: "var(--mt-accent-red)", label: "Red" },
      { cssVar: "var(--mt-accent-purple)", label: "Purple" }
    ]
  },
  {
    label: "Palette 3",
    inverse: "hsl(var(--foreground))",
    colors: [
      { cssVar: "hsl(var(--background))", label: "White", darkLabel: "Black" },
      { cssVar: "var(--mt-accent-blue-subtler)", label: "Blue subtle" },
      { cssVar: "var(--mt-accent-teal-subtler)", label: "Teal subtle" },
      { cssVar: "var(--mt-accent-green-subtler)", label: "Green subtle" },
      { cssVar: "var(--mt-accent-yellow-subtler)", label: "Yellow subtle" },
      { cssVar: "var(--mt-accent-red-subtler)", label: "Red subtle" },
      { cssVar: "var(--mt-accent-purple-subtler)", label: "Purple subtle" }
    ]
  }
];
const MemoizedColorButton = React.memo(({ color, isSelected, inverse, onClick }) => {
  const isDarkMode = useTheme();
  const label = isDarkMode && color.darkLabel ? color.darkLabel : color.label;
  return /* @__PURE__ */ jsxs(Tooltip, { children: [
    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
      ToggleGroupItem,
      {
        tabIndex: 0,
        className: "relative size-7 rounded-md p-0",
        value: color.cssVar,
        "aria-label": label,
        style: { backgroundColor: color.cssVar },
        onClick: (e) => {
          e.preventDefault();
          onClick(color.cssVar);
        },
        children: isSelected && /* @__PURE__ */ jsx(
          CheckIcon,
          {
            className: "absolute inset-0 m-auto size-6",
            style: { color: inverse }
          }
        )
      }
    ) }),
    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx("p", { children: label }) })
  ] });
});
MemoizedColorButton.displayName = "MemoizedColorButton";
const MemoizedColorPicker = React.memo(({ palette, selectedColor, inverse, onColorChange }) => /* @__PURE__ */ jsx(
  ToggleGroup,
  {
    type: "single",
    value: selectedColor,
    onValueChange: (value) => {
      if (value) onColorChange(value);
    },
    className: "gap-1.5",
    children: palette.colors.map((color, index) => /* @__PURE__ */ jsx(
      MemoizedColorButton,
      {
        inverse,
        color,
        isSelected: selectedColor === color.cssVar,
        onClick: onColorChange
      },
      index
    ))
  }
));
MemoizedColorPicker.displayName = "MemoizedColorPicker";
const SectionThree = ({
  editor,
  size,
  variant
}) => {
  const color = editor.getAttributes("textStyle")?.color || "hsl(var(--foreground))";
  const [selectedColor, setSelectedColor] = React.useState(color);
  const handleColorChange = React.useCallback(
    (value) => {
      setSelectedColor(value);
      if (editor.state.storedMarks) {
        const textStyleMarkType = editor.schema.marks.textStyle;
        if (textStyleMarkType) {
          editor.view.dispatch(
            editor.state.tr.removeStoredMark(textStyleMarkType)
          );
        }
      }
      setTimeout(() => {
        editor.chain().setColor(value).run();
      }, 0);
    },
    [editor]
  );
  React.useEffect(() => {
    setSelectedColor(color);
  }, [color]);
  return /* @__PURE__ */ jsxs(Popover, { children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      ToolbarButton,
      {
        tooltip: "Text color",
        "aria-label": "Text color",
        className: "gap-0",
        size,
        variant,
        children: [
          /* @__PURE__ */ jsxs(
            "svg",
            {
              xmlns: "http://www.w3.org/2000/svg",
              width: "24",
              height: "24",
              viewBox: "0 0 24 24",
              fill: "none",
              stroke: "currentColor",
              strokeWidth: "2",
              strokeLinecap: "round",
              strokeLinejoin: "round",
              className: "size-5",
              style: { color: selectedColor },
              children: [
                /* @__PURE__ */ jsx("path", { d: "M4 20h16" }),
                /* @__PURE__ */ jsx("path", { d: "m6 16 6-12 6 12" }),
                /* @__PURE__ */ jsx("path", { d: "M8 12h8" })
              ]
            }
          ),
          /* @__PURE__ */ jsx(CaretDownIcon, { className: "size-5" })
        ]
      }
    ) }),
    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: COLORS.map((palette, index) => /* @__PURE__ */ jsx(
      MemoizedColorPicker,
      {
        palette,
        inverse: palette.inverse,
        selectedColor,
        onColorChange: handleColorChange
      },
      index
    )) }) })
  ] });
};
SectionThree.displayName = "SectionThree";

export { SectionThree, SectionThree as default };
