import { Y as o, X as P, bY as F, w as Q, Z as $, bZ as U, az as q, U as H, F as s, G as E, af as I, a6 as k, a7 as h, a8 as w, a9 as T, aa as G, ac as B, ab as O, b_ as W, b$ as Y, c0 as Z, S as _ } from "./603b75d9.js";
import { useContext as R, useRef as d, useEffect as D } from "react";
import { EventTypeEnum as l } from "./30970d5d.js";
import "react-dom";
const z = {
  name: "{{currentUser.name}}",
  text: o("customComp.text"),
  query: "query1"
}, X = `
  <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>
  `, J = 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 K(t) {
  const r = d(String(Date.now())), {
    model: n,
    code: c,
    onModelChange: p,
    dispatch: A
  } = t, i = d(null), a = d(n), y = d(!1), V = d({
    runQuery: async (e) => {
      const {
        queryName: u
      } = e;
      return W(A, Y(u, Z({}))).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 = (f) => {
      const {
        type: b,
        payload: x,
        hostId: M
      } = f.data;
      if (!b || !x || !M || M !== r.current)
        return;
      const {
        method: v,
        data: j,
        id: L
      } = x;
      if (b === l.Invoke) {
        const g = V.current[v];
        if (!g || typeof g != "function")
          return;
        g(j).then((N) => {
          m(e, {
            type: l.Invoke,
            payload: {
              id: L,
              method: v,
              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 f = new URL("?_t=" + Date.now(), S);
      e.setAttribute("src", f.toString());
    }
    return () => {
      y.current = !0, window.removeEventListener("message", u), e.removeEventListener("load", C);
    };
  }, [c]), /* @__PURE__ */ s(J, {
    $style: t.style,
    $animationStyle: t.animationStyle,
    children: /* @__PURE__ */ s("iframe", {
      ref: i,
      title: "custom-comp",
      src: o("customComponent.entryUrl")
    })
  });
}
const tt = {
  model: F(z),
  code: Q(_, X),
  style: $(U, "style"),
  animationStyle: $(q, "animationStyle")
}, et = new H(tt, (t, r) => {
  const {
    code: n,
    model: c
  } = t;
  return /* @__PURE__ */ s(K, {
    style: t.style,
    animationStyle: t.animationStyle,
    code: n,
    model: c.value,
    onModelChange: (p) => c.onChange(p),
    dispatch: r
  });
}).setPropertyViewFn((t) => /* @__PURE__ */ s(E, {
  children: (R(I).editorModeStatus === "logic" || R(I).editorModeStatus === "both") && /* @__PURE__ */ k(E, {
    children: [/* @__PURE__ */ k(h, {
      name: w.interaction,
      children: [t.model.propertyView({
        label: o("customComp.data")
      }), t.code.propertyView({
        label: o("customComp.code"),
        language: "html"
      }), T(t)]
    }), /* @__PURE__ */ s(h, {
      name: w.style,
      children: t.style.getPropertyView()
    }), /* @__PURE__ */ s(h, {
      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
};
