import { jsx as m, jsxs as x } from "react/jsx-runtime";
import { useState as i, useEffect as v, useCallback as t } from "react";
import E from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
import h from "../../../box/Box.js";
import w from "../../../text/Text.js";
import y from "../../../input/Input.js";
import C from "../../../button/Button.js";
const k = ({ onAction: p, selectedVideo: a = null }) => {
  const [n, l] = i((a == null ? void 0 : a.src) ?? ""), [o, g] = i(!1);
  v(() => {
    l((a == null ? void 0 : a.src) ?? "");
  }, [a == null ? void 0 : a.src]);
  const b = t((r) => {
    l(r);
  }, []), f = t(
    (r) => {
      g(r), r || l((a == null ? void 0 : a.src) ?? "");
    },
    [a == null ? void 0 : a.src]
  ), u = t(() => {
    n.trim() && (p == null || p("insertVideo", {
      src: n.trim(),
      alignment: (a == null ? void 0 : a.alignment) ?? "left"
    }), f(!1));
  }, [n, a == null ? void 0 : a.alignment, p, f]), s = t(
    (r) => {
      r.key === "Enter" ? (r.preventDefault(), u()) : r.key === "Escape" && f(!1);
    },
    [u, f]
  );
  return /* @__PURE__ */ m(E, { action: "video", icon: "Video", ariaLabel: "Video einfügen", open: o, onOpenChange: f, children: /* @__PURE__ */ x(h, { className: "w-full flex flex-col gap-[var(--spacing-3)] p-[var(--spacing-3)]", children: [
    /* @__PURE__ */ m(w, { as: "h3", children: "Videolink" }),
    /* @__PURE__ */ m(h, { className: "flex flex-col gap-[var(--spacing-2)]", children: /* @__PURE__ */ m(
      y,
      {
        id: "video-src",
        type: "url",
        value: n,
        onChange: b,
        onKeyDown: s,
        placeholder: "https://www.youtube.com/watch?v=VIDEO_ID",
        autoComplete: "off",
        "aria-label": "Video URL"
      }
    ) }),
    /* @__PURE__ */ m(C, { variant: "default", onClick: u, disabled: !n.trim(), fullWidth: !0, label: "Einbetten", "aria-label": "Video einbetten" })
  ] }) });
};
k.displayName = "HtmlEditorVideoAction";
export {
  k as default
};
//# sourceMappingURL=HtmlEditorVideoAction.js.map
