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