import { jsx as e } from "react/jsx-runtime";
import { useState as i, useRef as f, useCallback as g, useEffect as l } from "react";
import { useParams as w, useSearchParams as P } from "react-router";
import { Container as y, Segment as C } from "semantic-ui-react";
import { SettingsConsumer as h } from "@devgateway/wp-react-lib";
import { getComponentByNameIgnoreCase as v } from "../embeddable/index.js";
const b = () => {
  const p = w(), [c] = P(), [a] = i(() => v(p.name ?? "")), [o, d] = i(
    () => Object.fromEntries(c.entries())
  ), s = f(o);
  s.current = o;
  const n = g((u) => {
    const t = u.data;
    if (t.messageType && t.messageType === "component-attributes") {
      const m = { ...s.current };
      Object.keys(t).forEach((r) => {
        m["data-" + r.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()] = typeof t[r] == "object" ? JSON.stringify(t[r]) : t[r];
      }), d(m);
    }
  }, []);
  return l(() => (window.addEventListener("message", n, !1), window.parent && window.parent.postMessage({ type: "componentReady", value: !0 }, "*"), window.top && window.top.postMessage({ type: "componentReady", value: !0 }, "*"), () => {
    window.removeEventListener("message", n);
  }), [n]), /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(y, { fluid: !0, className: "editing", children: a ? /* @__PURE__ */ e(a, { ...o, editing: !0 }) : /* @__PURE__ */ e(C.Group, { color: "red", textAlign: "center", children: /* @__PURE__ */ e("h1", { children: "Wrong Component Name" }) }) }) });
}, L = () => /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(b, {}) });
export {
  L as default
};
