import { a0 as o, b9 as L, bF as N, w as V, ba as F, U as H, V as i, bh as v, bg as I, P, bi as Q, bj as U, bl as q, bn as $, bo as E, bG as G, bH as O, bI as T, bJ as W } from "./684d2f28.js";
import { useContext as S, useRef as d, useEffect as k } from "react";
import { EventTypeEnum as u } from "./30970d5d.js";
import "react-dom";
const J = {
  name: "{{currentUser.name}}",
  text: o("customComp.text"),
  query: "query1"
}, _ = `
  <style type="text/css">
  body {
    padding: 5px;
  }
  </style>
  
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/antd@4.21.4/dist/antd.min.css"/>
  <script type="text/javascript" src="https://unpkg.com/antd@4.21.4/dist/antd.min.js" ><\/script>
  
  <div id="root"></div>
  
  <script type="text/babel">
  
  const { Button, Card, Space } = antd;
  
  const MyCustomComponent = ({ runQuery, model, updateModel}) => (
    <Card title={"Hello, " + model.name}>
        <p>{model.text}</p>
        <Space>
          <Button
            type="primary"
            onClick={() => runQuery(model.query)}
         >
            ${o("customComp.triggerQuery")}
          </Button>
          <Button
            onClick={() => updateModel({ text: "${o("customComp.updateText")}" })}
          >
          ${o("customComp.updateData")}
          </Button>
      </Space>
    </Card>
  );
  
  const ConnectedComponent = ${o("customComp.sdkGlobalVarName")}.connect(MyCustomComponent);
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<ConnectedComponent />);
  
  <\/script>
  `, z = L.div`
  width: 100%;
  height: 100%;
  iframe {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
`;
function p(t, s) {
  var n;
  (n = t == null ? void 0 : t.contentWindow) == null || n.postMessage(s, "*");
}
function K(t) {
  const s = d(String(Date.now())), {
    model: n,
    code: a,
    onModelChange: l,
    dispatch: B
  } = t, c = d(null), r = d(n), y = d(!1), R = d({
    runQuery: async (e) => {
      const {
        queryName: m
      } = e;
      return O(B, T(m, W({}))).catch((C) => Promise.resolve({}));
    },
    getModel: async (e) => r.current,
    updateModel: async (e) => (r.current = {
      ...r.current,
      ...e
    }, p(c.current, {
      type: u.Data,
      payload: {
        model: r.current
      }
    }), l(r.current), r.current)
  });
  return k(() => {
    p(c.current, {
      type: u.Data,
      payload: {
        model: n
      }
    }), r.current = n;
  }, [n]), k(() => {
    if (!c.current)
      return;
    const e = c.current, m = (h) => {
      const {
        type: b,
        payload: w,
        hostId: x
      } = h.data;
      if (!b || !w || !x || x !== s.current)
        return;
      const {
        method: M,
        data: D,
        id: j
      } = w;
      if (b === u.Invoke) {
        const f = R.current[M];
        if (!f || typeof f != "function")
          return;
        f(D).then((A) => {
          p(e, {
            type: u.Invoke,
            payload: {
              id: j,
              method: M,
              response: A
            }
          });
        });
      }
    }, C = () => {
      p(e, {
        type: u.Init,
        payload: {
          hostId: s.current,
          code: a
        }
      });
    };
    window.addEventListener("message", m), e.addEventListener("load", C);
    const g = e.getAttribute("src");
    if (g && y) {
      y.current = !1;
      const h = new URL("?_t=" + Date.now(), g);
      e.setAttribute("src", h.toString());
    }
    return () => {
      y.current = !0, window.removeEventListener("message", m), e.removeEventListener("load", C);
    };
  }, [a]), /* @__PURE__ */ i(z, {
    children: /* @__PURE__ */ i("iframe", {
      ref: c,
      title: "custom-comp",
      src: o("customComponent.entryUrl")
    })
  });
}
const X = {
  model: N(J),
  code: V(F, _)
}, Y = new H(X, (t, s) => {
  const {
    code: n,
    model: a
  } = t;
  return /* @__PURE__ */ i(K, {
    code: n,
    model: a.value,
    onModelChange: (l) => a.onChange(l),
    dispatch: s
  });
}).setPropertyViewFn((t) => /* @__PURE__ */ i(v, {
  children: (S(I).editorModeStatus === "logic" || S(I).editorModeStatus === "both") && /* @__PURE__ */ i(v, {
    children: /* @__PURE__ */ P(Q, {
      name: U.interaction,
      children: [t.model.propertyView({
        label: o("customComp.data")
      }), t.code.propertyView({
        label: o("customComp.code"),
        language: "html"
      }), q(t)]
    })
  })
})).build();
class Z extends Y {
  autoHeight() {
    return !1;
  }
}
const rt = $(Z, [new E("model", o("data")), new E("code", o("code")), G]);
export {
  rt as CustomComp
};
