import { jsx as t, Fragment as I, jsxs as h } from "react/jsx-runtime";
import { useDynamicImport as l } from "./index-use-dynamic-import.js";
import { classNames as v } from "./index-classNames.js";
import { L as S } from "./index-LexicalComposerContext.js";
import { DropdownMenu as L } from "./index-DropdownMenu.js";
import { Icon as N } from "./index-Icon.js";
import { IconNames as b } from "./index-IconNames.js";
import { L as _ } from "./index-LexicalToolkit.js";
import { useState as D, useRef as G } from "react";
import { createPortal as V } from "react-dom";
import o from "./index-RteToolbar.module.scss.js";
const B = (d) => {
  const {
    toolbarPortalElem: c,
    className: a = "",
    setIsLinkEditMode: m
  } = d, [r] = S.useLexicalComposerContext(), e = _.useLexicalToolbar({
    editor: r
  }), [n, g] = D(!1), p = G(null), {
    SvgIcon: k
  } = l("text-editor/link.svg"), {
    SvgIcon: u
  } = l("text-editor/unlink.svg"), {
    SvgIcon: f
  } = l("text-editor/numbered-list.svg"), {
    SvgIcon: x
  } = l("text-editor/bullet-list.svg"), {
    SvgIcon: C
  } = l("text-editor/font-size.svg"), {
    SvgIcon: F
  } = l("text-editor/eraser.svg");
  return t(I, {
    children: c && V(h("div", {
      className: v(o.container, a),
      onMouseDown: (w) => {
        w.preventDefault();
      },
      children: [t(i, {
        disabled: !e.bold.show,
        active: e.bold.active,
        onClick: () => e.bold.dispatch(),
        children: t("strong", {
          children: "B"
        })
      }), t(i, {
        disabled: !e.italic.show,
        active: e.italic.active,
        onClick: () => e.italic.dispatch(),
        children: t("em", {
          children: "I"
        })
      }), t(i, {
        disabled: !e.underline.show,
        active: e.underline.active,
        onClick: () => e.underline.dispatch(),
        children: t("u", {
          children: "U"
        })
      }), t(s, {}), h("div", {
        ref: p,
        children: [t(i, {
          disabled: !e.blockFormatting.show,
          active: !1,
          onClick: () => g(!n),
          children: h("span", {
            className: o.toggle,
            children: [t("span", {
              children: t("img", {
                src: C,
                width: 20,
                height: 20
              })
            }), t("span", {
              className: o.toggleIcon,
              children: t(N, {
                color: n ? "--n500" : "--n600",
                children: n ? b.caretUp : b.caretDown
              })
            })]
          })
        }), t(L, {
          anchorEl: p,
          isOpen: n,
          toggleIsOpen: () => g(!n),
          items: [{
            selected: e.blockFormatting.value == "paragraph",
            title: "Normal",
            onClick: () => e.blockFormatting.paragraph.dispatch()
          }, {
            selected: e.blockFormatting.value == "h1",
            title: "Heading 1",
            onClick: () => e.blockFormatting.h1.dispatch()
          }, {
            selected: e.blockFormatting.value == "h2",
            title: "Heading 2",
            onClick: () => e.blockFormatting.h2.dispatch()
          }, {
            selected: e.blockFormatting.value == "h3",
            title: "Heading 3",
            onClick: () => e.blockFormatting.h3.dispatch()
          }]
        })]
      }), t(s, {}), t(i, {
        disabled: !e.link.show,
        active: !1,
        onClick: () => {
          m(!0), e.link.dispatch();
        },
        children: t("img", {
          src: e.link.active ? u : k,
          width: 20,
          height: 20
        })
      }), t(s, {}), t(i, {
        disabled: !e.blockFormatting.show,
        active: !1,
        onClick: () => {
          e.blockFormatting.numberList.dispatch();
        },
        children: t("img", {
          src: f,
          width: 20,
          height: 20
        })
      }), t(i, {
        disabled: !e.blockFormatting.show,
        active: !1,
        onClick: () => {
          e.blockFormatting.bulletList.dispatch();
        },
        children: t("img", {
          src: x,
          width: 20,
          height: 20
        })
      }), t(s, {}), t(i, {
        disabled: !1,
        active: !1,
        onClick: () => {
          e.clearFormatting.dispatch();
        },
        children: t("img", {
          src: F,
          width: 16,
          height: 16
        })
      })]
    }), c)
  });
}, i = ({
  active: d,
  disabled: c,
  onClick: a,
  children: m
}) => t("div", {
  className: v(o.button, d ? o.active : void 0, c ? o.disabled : void 0),
  onClick: (r) => {
    r.preventDefault(), r.stopPropagation(), a && a();
  },
  children: m
}), s = () => t("div", {
  className: o.divider
});
export {
  B as RteToolbar
};
