import { jsxs as t, jsx as r } from "react/jsx-runtime";
import { useState as d, useEffect as g, useCallback as o } from "react";
import D from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
import h from "../../../box/Box.js";
import k from "../../../label/Label.js";
import x from "../../../input/Input.js";
import E from "../../../button/Button.js";
const w = ({ children: y, onAction: s, selectedText: e = "", selectedUrl: l = "" }) => {
  const [v, b] = d(!1), [i, p] = d(l), [f, m] = d(e);
  g(() => {
    p(l);
  }, [l]), g(() => {
    m(e);
  }, [e]);
  const C = o((a) => {
    p(a);
  }, []), L = o((a) => {
    m(a);
  }, []), n = o(
    (a) => {
      b(a), a || (p(l), m(e));
    },
    [l, e]
  ), c = o(() => {
    i.trim() && (s == null || s("link", {
      url: i.trim(),
      displayText: f.trim() || i.trim()
      // Fallback to URL if no display text
    }), n(!1));
  }, [i, f, s, n]), u = o(
    (a) => {
      a.key === "Enter" ? (a.preventDefault(), c()) : a.key === "Escape" && n(!1);
    },
    [c, n]
  );
  return /* @__PURE__ */ t(D, { action: "link", icon: "Link2", ariaLabel: "Link", open: v, onOpenChange: n, popoverWidth: "w-fit", children: [
    /* @__PURE__ */ t(h, { className: "flex flex-col gap-[var(--spacing-3)] p-[var(--spacing-3)] w-[var(--spacing-64)]", children: [
      /* @__PURE__ */ t(h, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
        /* @__PURE__ */ t(k, { htmlFor: "link-url", variant: "field", children: [
          "URL ",
          /* @__PURE__ */ r("span", { className: "text-[var(--base-destructive)]", children: "*" })
        ] }),
        /* @__PURE__ */ r(
          x,
          {
            id: "link-url",
            type: "url",
            value: i,
            onChange: C,
            onKeyDown: u,
            placeholder: "https://beispiel.de",
            autoComplete: "off"
          }
        )
      ] }),
      /* @__PURE__ */ t(h, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
        /* @__PURE__ */ r(k, { htmlFor: "link-display-text", variant: "field", children: "Anzeigetext" }),
        /* @__PURE__ */ r(
          x,
          {
            id: "link-display-text",
            type: "text",
            value: f,
            onChange: L,
            onKeyDown: u,
            placeholder: "Beispiellink",
            autoComplete: "off"
          }
        )
      ] }),
      /* @__PURE__ */ r(E, { variant: "default", onClick: c, disabled: !i.trim(), fullWidth: !0, label: "Link einfügen", "aria-label": "Link einfügen" })
    ] }),
    y
  ] });
};
w.displayName = "HtmlEditorLinkAction";
export {
  w as default
};
//# sourceMappingURL=HtmlEditorLinkAction.js.map
