import { jsxs as n, jsx as f } from "react/jsx-runtime";
import { useState as E, useEffect as N, useCallback as i } from "react";
import { MEDIA_ALIGNMENT_OPTIONS as T } from "../../constants/index.js";
import x from "../../../box/Box.js";
import h from "../../../button/Button.js";
import y from "../../../input/Input.js";
const D = ({ selectedImage: r, onAction: l }) => {
  const [u, t] = E((r == null ? void 0 : r.alt) ?? "");
  N(() => {
    t((r == null ? void 0 : r.alt) ?? "");
  }, [r == null ? void 0 : r.alt]);
  const v = i(
    (a) => {
      l == null || l("imageAlignment", { alignment: a });
    },
    [l]
  ), p = i(() => {
    u !== (r == null ? void 0 : r.alt) && (l == null || l("imageAlt", { alt: u }));
  }, [u, r == null ? void 0 : r.alt, l]), b = i(
    (a) => {
      a.key === "Enter" && (a.preventDefault(), p());
    },
    [p]
  ), B = i(() => {
    l == null || l("deleteImage");
  }, [l]);
  return r ? (
    // Container styling (bg, shadow, border, rounded, padding) is provided by the
    // parent PopoverContent. This component only handles inner layout.
    /* @__PURE__ */ n(x, { className: "flex flex-row items-center gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ f(x, { className: "flex flex-row gap-[var(--spacing-1)]", children: T.map((a) => /* @__PURE__ */ f(
        h,
        {
          variant: r.alignment === a.value ? "default" : "outline",
          icon: a.icon,
          "aria-label": a.ariaLabel,
          onClick: () => v(a.value)
        },
        a.value
      )) }),
      /* @__PURE__ */ f(y, { type: "text", value: u, onChange: t, onBlur: p, onKeyDown: b, placeholder: "Alt-Text" }),
      /* @__PURE__ */ f(h, { variant: "destructive", icon: "Trash2", "aria-label": "Bild löschen", onClick: B })
    ] })
  ) : null;
};
D.displayName = "HtmlEditorImageBubbleMenu";
export {
  D as default
};
//# sourceMappingURL=HtmlEditorImageBubbleMenu.js.map
