import { jsx as o, jsxs as y } from "react/jsx-runtime";
import { flexGrow1 as z } from "./index-general.module.js";
import { L as g } from "./index-LexicalComposerContext.js";
import { Button as s, ButtonTypes as l, ButtonSizes as a } from "./index-Button.js";
import { IconNames as c } from "./index-IconNames.js";
import { Input as M } from "./index-Input.js";
import { L as f } from "./index-LexicalToolkit.js";
import { useRef as D, useState as U, useEffect as E } from "react";
import { createPortal as I } from "react-dom";
import { getFloatingLinkEditorPosition as S } from "./index-getLinkEditorPosition.js";
import t from "./index-RteLinkEditor.module.scss.js";
const _ = (N) => {
  const {
    anchorElem: m,
    isLinkEditMode: p,
    setIsLinkEditMode: r
  } = N, [R] = g.useLexicalComposerContext(), d = D(null), u = D(null), [k, L] = U(""), {
    currentNodeIsLink: i,
    linkUrl: h,
    dispatchLinkSubmission: C,
    dispatchLinkRemoval: v,
    linkNodeRect: x
  } = f.useHyperlinkEditor({
    editor: R,
    anchorElem: m
  });
  E(() => {
    p && d.current && d.current.focus();
  }, [p, i]), E(() => {
    i || (L(""), r(!1));
  }, [i]), E(() => {
    if (!u.current)
      return;
    const e = u.current;
    if (i) {
      if (x) {
        const n = S({
          linkNodeRect: x,
          anchorElem: m
        });
        e.style.opacity = "1", e.style.transform = `translate(${n.x}px, ${n.y}px)`;
      }
    } else
      e.style.opacity = "0", e.style.transform = "translate(-10000px, -10000px)";
  }, [x, i]);
  const w = () => {
    const e = f.sanitizeUrl(k), n = f.validateUrl(e);
    k && n ? C({
      url: e
    }) : v(), r(!1);
  };
  return I(o("div", {
    ref: u,
    className: t.container,
    children: p ? y("div", {
      className: t.row,
      children: [o(M, {
        inputRef: d,
        size: "small",
        value: k,
        className: z,
        placeholder: "https://www.google.com/",
        onChange: (e) => {
          L(e.target.value);
        },
        onKeyDown: (e) => {
          e.key === "Enter" ? (e.preventDefault(), w()) : e.key === "Escape" && (e.preventDefault(), r(!1));
        }
      }), y("div", {
        className: t.row,
        children: [o(s, {
          size: a.small,
          iconLeft: c.check,
          type: l.default,
          onMouseDown: (e) => e.preventDefault(),
          onClick: () => {
            w();
          }
        }), o(s, {
          size: a.small,
          iconLeft: c.close,
          type: l.default,
          onMouseDown: (e) => e.preventDefault(),
          onClick: () => {
            r(!1);
          }
        })]
      })]
    }) : y("div", {
      className: t.row,
      children: [o("div", {
        className: t.link,
        children: o("a", {
          href: f.sanitizeUrl(h),
          target: "_blank",
          rel: "noopener noreferrer",
          className: t.a,
          children: h
        })
      }), o(s, {
        size: a.small,
        iconLeft: c.edit,
        type: l.default,
        onMouseDown: (e) => e.preventDefault(),
        onClick: () => {
          L(h), r(!0);
        }
      }), o(s, {
        size: a.small,
        iconLeft: c.trash,
        type: l.default,
        onMouseDown: (e) => e.preventDefault(),
        onClick: v
      })]
    })
  }), m);
};
export {
  _ as RteLinkEditor
};
