import { defineComponent as h, ref as v, onMounted as d, watch as E, onBeforeUnmount as C, createElementBlock as g, openBlock as x } from "vue";
import { useActiveEntities as S, useWorkspace as _ } from "@scalar/api-client/store";
import { mutateServerDiff as k, mutateSecuritySchemeDiff as b } from "@scalar/api-client/views/Request/libs";
import { watchDebounced as A } from "@vueuse/core";
import B from "microdiff";
import { useApiClient as D } from "./useApiClient.js";
import { useNavState as y } from "../../hooks/useNavState.js";
import { useExampleStore as I } from "../../legacy/stores/useExampleStore.js";
const F = /* @__PURE__ */ h({
  __name: "ApiClientModal",
  props: {
    configuration: {}
  },
  setup(i) {
    const n = v(null), { client: o, init: p } = D(), { selectedExampleKey: f, operationId: u } = I(), c = S(), a = _(), { isIntersectionEnabled: l } = y();
    return d(() => {
      n.value && p({
        el: n.value,
        configuration: i.configuration,
        store: a
      });
    }), A(
      () => i.configuration,
      (e, r) => {
        var m;
        if (!r)
          return;
        const s = B(r, e);
        s.some(
          (t) => t.path[0] === "url" || t.path[0] === "content" || t.path[1] === "url" || t.path[1] === "content"
        ) ? (m = o.value) == null || m.updateConfig(e) : s.forEach((t) => {
          t.path[0] === "servers" ? k(t, c, a) : t.path[0] === "authentication" && b(t, c, a);
        }), l.value = !1, setTimeout(() => {
          l.value = !0;
        }, 1e3);
      },
      { deep: !0, debounce: 300 }
    ), E(f, (e) => {
      o.value && e && u.value && o.value.updateExample(e, u.value);
    }), C(() => {
      var e;
      return (e = o.value) == null ? void 0 : e.app.unmount();
    }), (e, r) => (x(), g("div", {
      ref_key: "el",
      ref: n
    }, null, 512));
  }
});
export {
  F as default
};
