import { a4 as o, a3 as P, c9 as H, w as Q, a5 as $, ca as U, aG as q, U as F, H as s, I, am as E, ad as k, ae as f, af as w, ag as T, ah as G, aj as B, ai as O, cb as W, cc as X, cd as _, X as z } from "./56c67d3b.js";
import { useContext as R, useRef as d, useEffect as D } from "react";
import { EventTypeEnum as l } from "./30970d5d.js";
import "react-dom";
const J = {
  name: "{{currentUser.name}}",
  text: o("customComp.text"),
  query: "query1"
}, K = `
  <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>
  `, Y = P.div`
  width: 100%;
  height: 100%;
  ${(t) => t.$style};
  rotate: ${(t) => t.$style.rotation};
  ${(t) => t.$animationStyle};
  iframe {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
`;
function m(t, r) {
  var n;
  (n = t == null ? void 0 : t.contentWindow) == null || n.postMessage(r, "*");
}
function Z(t) {
  const r = d(String(Date.now())), {
    model: n,
    code: c,
    onModelChange: p,
    dispatch: j
  } = t, i = d(null), a = d(n), y = d(!1), A = d({
    runQuery: async (e) => {
      const {
        queryName: u
      } = e;
      return W(j, X(u, _({}))).catch((C) => Promise.resolve({}));
    },
    getModel: async (e) => a.current,
    updateModel: async (e) => (a.current = {
      ...a.current,
      ...e
    }, m(i.current, {
      type: l.Data,
      payload: {
        model: a.current
      }
    }), p(a.current), a.current)
  });
  return D(() => {
    m(i.current, {
      type: l.Data,
      payload: {
        model: n
      }
    }), a.current = n;
  }, [n]), D(() => {
    if (!i.current)
      return;
    const e = i.current, u = (g) => {
      const {
        type: x,
        payload: M,
        hostId: v
      } = g.data;
      if (!x || !M || !v || v !== r.current)
        return;
      const {
        method: b,
        data: V,
        id: L
      } = M;
      if (x === l.Invoke) {
        const h = A.current[b];
        if (!h || typeof h != "function")
          return;
        h(V).then((N) => {
          m(e, {
            type: l.Invoke,
            payload: {
              id: L,
              method: b,
              response: N
            }
          });
        });
      }
    }, C = () => {
      m(e, {
        type: l.Init,
        payload: {
          hostId: r.current,
          code: c
        }
      });
    };
    window.addEventListener("message", u), e.addEventListener("load", C);
    const S = e.getAttribute("src");
    if (S && y) {
      y.current = !1;
      const g = new URL("?_t=" + Date.now(), S);
      e.setAttribute("src", g.toString());
    }
    return () => {
      y.current = !0, window.removeEventListener("message", u), e.removeEventListener("load", C);
    };
  }, [c]), /* @__PURE__ */ s(Y, {
    $style: t.style,
    $animationStyle: t.animationStyle,
    children: /* @__PURE__ */ s("iframe", {
      ref: i,
      title: "custom-comp",
      src: o("customComponent.entryUrl")
    })
  });
}
const tt = {
  model: H(J),
  code: Q(z, K),
  style: $(U, "style"),
  animationStyle: $(q, "animationStyle")
}, et = new F(tt, (t, r) => {
  const {
    code: n,
    model: c
  } = t;
  return /* @__PURE__ */ s(Z, {
    style: t.style,
    animationStyle: t.animationStyle,
    code: n,
    model: c.value,
    onModelChange: (p) => c.onChange(p),
    dispatch: r
  });
}).setPropertyViewFn((t) => /* @__PURE__ */ s(I, {
  children: (R(E).editorModeStatus === "logic" || R(E).editorModeStatus === "both") && /* @__PURE__ */ k(I, {
    children: [/* @__PURE__ */ k(f, {
      name: w.interaction,
      children: [t.model.propertyView({
        label: o("customComp.data")
      }), t.code.propertyView({
        label: o("customComp.code"),
        language: "html"
      }), T(t)]
    }), /* @__PURE__ */ s(f, {
      name: w.style,
      children: t.style.getPropertyView()
    }), /* @__PURE__ */ s(f, {
      name: w.animationStyle,
      hasTooltip: !0,
      children: t.animationStyle.getPropertyView()
    })]
  })
})).build();
class ot extends et {
  autoHeight() {
    return !1;
  }
}
const ct = G(ot, [new B("model", o("data")), new B("code", o("code")), O]);
export {
  ct as CustomComp
};
