import { jsx as n, jsxs as p } from "react/jsx-runtime";
import { useState as y, useEffect as B, useCallback as l } from "react";
import j from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
import w from "../../../box/Box.js";
import C from "../../../label/Label.js";
import N from "../../../input/Input.js";
import S from "../../../text/Text.js";
import s from "../../../button/Button.js";
const H = ({ onAction: t, selectedImage: i = null, open: h, onOpenChange: a }) => {
  const [D, E] = y(!1);
  B(() => {
    h !== void 0 && E(h);
  }, [h]);
  const [o, u] = y((i == null ? void 0 : i.src) ?? ""), [b, x] = y((i == null ? void 0 : i.alt) ?? "");
  B(() => {
    u((i == null ? void 0 : i.src) ?? "");
  }, [i == null ? void 0 : i.src]), B(() => {
    x((i == null ? void 0 : i.alt) ?? "");
  }, [i == null ? void 0 : i.alt]);
  const L = l((r) => {
    u(r);
  }, []), T = l((r) => {
    x(r);
  }, []), f = l(
    (r) => {
      E(r), a == null || a(r), r || (u((i == null ? void 0 : i.src) ?? ""), x((i == null ? void 0 : i.alt) ?? ""));
    },
    [i == null ? void 0 : i.src, i == null ? void 0 : i.alt, a]
  ), v = l(() => {
    o.trim() && (t == null || t("insertImage", {
      src: o.trim(),
      alt: b.trim(),
      alignment: (i == null ? void 0 : i.alignment) ?? "left"
    }), f(!1));
  }, [o, b, i == null ? void 0 : i.alignment, t, f]), k = l(
    (r) => {
      r.key === "Enter" ? (r.preventDefault(), v()) : r.key === "Escape" && f(!1);
    },
    [v, f]
  );
  return /* @__PURE__ */ n(j, { action: "image", icon: "ImageUp", ariaLabel: "Bild einfügen", open: D, onOpenChange: f, children: /* @__PURE__ */ p(w, { className: "w-full flex flex-col gap-[var(--spacing-3)] p-[var(--spacing-3)]", children: [
    /* @__PURE__ */ p(w, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ p(C, { htmlFor: "image-src", variant: "field", children: [
        "URL ",
        /* @__PURE__ */ n("span", { className: "text-[var(--base-destructive)]", children: "*" })
      ] }),
      /* @__PURE__ */ n(
        N,
        {
          id: "image-src",
          type: "url",
          value: o,
          onChange: L,
          onKeyDown: k,
          placeholder: "https://beispiel.de/bild.jpg",
          autoComplete: "off"
        }
      ),
      /* @__PURE__ */ n(S, { type: "muted", children: "Laden Sie Ihr Bild bei einem anderen Anbieter hoch, um es hier einzubinden." })
    ] }),
    /* @__PURE__ */ p(w, { className: "flex flex-col gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ n(C, { htmlFor: "image-alt", variant: "field", children: "Alt-Text" }),
      /* @__PURE__ */ n(
        N,
        {
          id: "image-alt",
          type: "text",
          value: b,
          onChange: T,
          onKeyDown: k,
          placeholder: "Beschreibung des Bildes",
          autoComplete: "off"
        }
      ),
      /* @__PURE__ */ n(S, { type: "muted", children: "Wenn Ihr Bild nicht geladen werden kann wird dieser Text stattdessen dargestellt." })
    ] }),
    /* @__PURE__ */ n(s, { variant: "default", onClick: v, disabled: !o.trim(), fullWidth: !0, label: "Bild einfügen", "aria-label": "Bild einfügen" })
  ] }) });
};
H.displayName = "HtmlEditorImageAction";
export {
  H as default
};
//# sourceMappingURL=HtmlEditorImageAction.js.map
