import { jsx as a, jsxs as e } from "react/jsx-runtime";
import S, { useId as T, useRef as _, useState as r, useEffect as w, useCallback as c } from "react";
import { u as F } from "./index-CkhZlaGj.js";
const I = S.memo(({
  isOpen: s,
  currentUrl: o = "",
  currentText: m = "",
  currentTitle: u = "",
  currentTarget: h = "_blank",
  onInsert: g,
  onRemove: p,
  onClose: n
}) => {
  const N = T(), v = _(null), [k, y] = r(o), [x, C] = r(m), [f, L] = r(u), [b, R] = r(h), [d, i] = r("");
  w(() => {
    s && (y(o), C(m), L(u), R(h || "_blank"), i(""));
  }, [s, o, m, u, h]), F({ isOpen: s, dialogRef: v, onClose: n });
  const U = c((t) => {
    if (!t.trim())
      return i("URL tidak boleh kosong"), !1;
    if (t.startsWith("#"))
      return i(""), !0;
    try {
      const l = new URL(t);
      if (l.protocol !== "http:" && l.protocol !== "https:")
        return i("URL harus dimulai dengan http:// atau https://"), !1;
      if (t.includes("javascript:") || t.includes("data:") || t.includes("vbscript:"))
        return i("URL tidak valid"), !1;
    } catch {
      return i("URL tidak valid. Pastikan format benar (contoh: https://example.com)"), !1;
    }
    return i(""), !0;
  }, []), W = c((t) => {
    const l = t.trim();
    return l.startsWith("http://") || l.startsWith("https://") || l.startsWith("mailto:") || l.startsWith("#") ? l : `https://${l}`;
  }, []), j = c((t) => {
    t.preventDefault();
    const l = W(k);
    U(l) && g({
      url: l,
      text: x.trim() || void 0,
      title: f.trim() || void 0,
      target: b || void 0
    });
  }, [k, x, f, b, U, W, g]), D = c(() => {
    p?.(), n();
  }, [p, n]);
  return s ? /* @__PURE__ */ a("div", { className: "mtx-modal-overlay", onClick: n, children: /* @__PURE__ */ e(
    "div",
    {
      ref: v,
      className: "mtx-modal-dialog mtx-link-dialog",
      onClick: (t) => t.stopPropagation(),
      role: "dialog",
      "aria-modal": "true",
      "aria-labelledby": N,
      tabIndex: -1,
      children: [
        /* @__PURE__ */ e("div", { className: "mtx-modal-header", children: [
          /* @__PURE__ */ a("h3", { className: "mtx-modal-title", id: N, children: o ? "Edit Tautan" : "Sisipkan Tautan" }),
          /* @__PURE__ */ a("button", { className: "mtx-modal-close", onClick: n, title: "Tutup", "aria-label": "Tutup dialog", children: /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M4 4l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
        ] }),
        /* @__PURE__ */ e("form", { onSubmit: j, children: [
          /* @__PURE__ */ e("div", { className: "mtx-modal-body", children: [
            /* @__PURE__ */ e("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ e("label", { className: "mtx-form-label", htmlFor: "link-url", children: [
                "URL ",
                /* @__PURE__ */ a("span", { className: "mtx-required", children: "*" })
              ] }),
              /* @__PURE__ */ a(
                "input",
                {
                  id: "link-url",
                  type: "text",
                  className: `mtx-form-input ${d ? "mtx-input-error" : ""}`,
                  value: k,
                  onChange: (t) => {
                    y(t.target.value), d && i("");
                  },
                  placeholder: "https://example.com",
                  autoFocus: !0,
                  autoComplete: "url"
                }
              ),
              d && /* @__PURE__ */ a("div", { className: "mtx-form-error", children: d })
            ] }),
            /* @__PURE__ */ e("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ e("label", { className: "mtx-form-label", htmlFor: "link-text", children: [
                "Teks yang Ditampilkan",
                /* @__PURE__ */ a("span", { className: "mtx-form-hint", children: m ? "(kosongkan untuk tetap menggunakan teks saat ini)" : "(opsional, URL akan digunakan jika kosong)" })
              ] }),
              /* @__PURE__ */ a(
                "input",
                {
                  id: "link-text",
                  type: "text",
                  className: "mtx-form-input",
                  value: x,
                  onChange: (t) => C(t.target.value),
                  placeholder: "Klik di sini",
                  autoComplete: "off"
                }
              )
            ] }),
            /* @__PURE__ */ e("div", { className: "mtx-form-group", children: [
              /* @__PURE__ */ e("label", { className: "mtx-form-label", htmlFor: "link-title", children: [
                "Judul (Tooltip)",
                /* @__PURE__ */ a("span", { className: "mtx-form-hint", children: "Teks yang muncul saat hover" })
              ] }),
              /* @__PURE__ */ a(
                "input",
                {
                  id: "link-title",
                  type: "text",
                  className: "mtx-form-input",
                  value: f,
                  onChange: (t) => L(t.target.value),
                  placeholder: "Kunjungi website kami",
                  autoComplete: "off"
                }
              )
            ] }),
            /* @__PURE__ */ a("div", { className: "mtx-form-group mtx-form-checkbox", children: /* @__PURE__ */ e("label", { className: "mtx-checkbox-label", children: [
              /* @__PURE__ */ a(
                "input",
                {
                  type: "checkbox",
                  checked: b === "_blank",
                  onChange: (t) => R(t.target.checked ? "_blank" : "_self")
                }
              ),
              /* @__PURE__ */ a("span", { children: "Buka di tab baru" })
            ] }) })
          ] }),
          /* @__PURE__ */ e("div", { className: "mtx-modal-footer", children: [
            /* @__PURE__ */ a("button", { type: "button", className: "mtx-btn mtx-btn-secondary", onClick: n, children: "Batal" }),
            o && p && /* @__PURE__ */ a("button", { type: "button", className: "mtx-btn mtx-btn-danger", onClick: D, children: "Hapus Tautan" }),
            /* @__PURE__ */ e("button", { type: "submit", className: "mtx-btn mtx-btn-primary", children: [
              o ? "Perbarui" : "Sisipkan",
              " Tautan"
            ] })
          ] })
        ] })
      ]
    }
  ) }) : null;
});
I.displayName = "LinkDialogImpl";
export {
  I as LinkDialogImpl
};
