import { defineComponent as R, ref as c, toRef as _, provide as $, useTemplateRef as w, onBeforeMount as V, watch as u, computed as A, createElementBlock as B, openBlock as k, createBlock as P, createCommentVNode as U, createVNode as D, unref as n, resolveDynamicComponent as K, withCtx as i, createTextVNode as F, toDisplayString as O, renderSlot as f, isRef as Y } from "vue";
import { safeLocalStorage as E, REFERENCE_LS_KEYS as x } from "@scalar/helpers/object/local-storage";
import { makeUrlAbsolute as z } from "@scalar/helpers/url/make-url-absolute";
import { redirectToProxy as H } from "@scalar/oas-utils/helpers";
import { useColorMode as W } from "@scalar/use-hooks/useColorMode";
import { useSeoMeta as j } from "@unhead/vue";
import { useFavicon as q } from "@vueuse/core";
import G from "../components/ApiReferenceLayout.vue.js";
import { NAV_STATE_SYMBOL as J } from "../hooks/useNavState.js";
import { isClient as g } from "./blocks/scalar-request-example-block/helpers/find-client.js";
import { getDocumentName as Q } from "./helpers/get-document-name.js";
import { mapConfiguration as M } from "./helpers/map-configuration.js";
import { normalizeContent as X } from "./helpers/normalize-content.js";
import { useMultipleDocuments as Z } from "../features/multiple-documents/useMultipleDocuments.js";
import { onCustomEvent as p } from "./events/listeners.js";
import ee from "../features/multiple-documents/DocumentSelector.vue.js";
const ke = /* @__PURE__ */ R({
  __name: "ApiReferenceWorkspace",
  props: {
    configuration: {},
    store: {}
  },
  setup(y) {
    const v = y, {
      availableDocuments: C,
      selectedConfiguration: o,
      selectedDocumentIndex: s,
      isIntersectionEnabled: m,
      hash: S,
      hashPrefix: T
    } = Z({
      configuration: _(v, "configuration"),
      isIntersectionEnabled: c(!1),
      hash: c(""),
      hashPrefix: c("")
    }), h = (e, t) => fetch(
      H(o.value.proxyUrl, e.toString()),
      t
    );
    $(J, { isIntersectionEnabled: m, hash: S, hashPrefix: T });
    const d = w("root"), a = v.store;
    V(() => {
      const e = E().getItem(
        x.SELECTED_CLIENT
      );
      g(e) && !a.workspace["x-scalar-default-client"] && a.update("x-scalar-default-client", e);
    });
    const b = async (e) => {
      var l;
      const t = X(e.content), r = Q({
        name: e.slug || e.title,
        url: e.url,
        document: t
      });
      if (a.workspace.documents[r]) {
        t && (m.value = !1, a.replaceDocument(r, t), a.update("x-scalar-active-document", r), setTimeout(() => {
          m.value = !0;
        }, 300));
        return;
      }
      if (t)
        return await a.addDocument({
          name: r,
          document: t,
          config: M(e)
        });
      if (e.url)
        return await a.addDocument({
          name: e.slug ?? "default",
          url: z(e.url, {
            basePath: (l = o.value.pathRouting) == null ? void 0 : l.basePath
          }),
          fetch: h,
          config: M(e)
        });
    };
    u(
      [
        () => o.value.slug,
        () => o.value.url,
        () => o.value.content
      ],
      ([e, t, r]) => {
        (e || t || r) && b(o.value);
      },
      { immediate: !0 }
    ), p(d, "scalar-update-dark-mode", (e) => {
      a.update("x-scalar-dark-mode", e.detail.value);
    }), p(d, "scalar-update-active-document", (e) => {
      a.update("x-scalar-active-document", e.detail.value);
    }), p(d, "scalar-update-selected-client", (e) => {
      a.update("x-scalar-default-client", e.detail), E().setItem(x.SELECTED_CLIENT, e.detail);
    }), u(
      () => o.value.defaultHttpClient,
      (e) => {
        if (e) {
          const { targetKey: t, clientKey: r } = e, l = `${t}/${r}`;
          g(l) && a.update("x-scalar-default-client", l);
        }
      },
      { immediate: !0 }
    );
    const { toggleColorMode: I, isDarkMode: L } = W({
      initialColorMode: o.value.darkMode ? "dark" : void 0,
      overrideColorMode: o.value.forceDarkModeState
    });
    u(
      () => o.value.darkMode,
      (e) => a.update("x-scalar-dark-mode", !!e)
    ), u(
      () => L.value,
      (e) => a.update("x-scalar-dark-mode", e),
      { immediate: !0 }
    ), u(
      () => s.value,
      (e) => {
        var t;
        return a.update(
          "x-scalar-active-document",
          (t = C.value[e]) == null ? void 0 : t.slug
        );
      },
      { immediate: !0 }
    ), o.value.metaData && j(o.value.metaData);
    const N = A(() => o.value.favicon);
    return q(N), (e, t) => {
      var r;
      return k(), B("div", {
        ref_key: "root",
        ref: d
      }, [
        (r = n(o)) != null && r.customCss ? (k(), P(K("style"), { key: 0 }, {
          default: i(() => [
            F(O(n(o).customCss), 1)
          ]),
          _: 1
        })) : U("", !0),
        D(G, {
          configuration: n(o),
          isDark: !!n(a).workspace["x-scalar-dark-mode"],
          store: n(a),
          onToggleDarkMode: t[1] || (t[1] = () => n(I)()),
          onUpdateContent: t[2] || (t[2] = (l) => e.$emit("updateContent", l))
        }, {
          footer: i(() => [
            f(e.$slots, "footer")
          ]),
          "content-end": i(() => [
            f(e.$slots, "footer")
          ]),
          "document-selector": i(() => [
            D(n(ee), {
              modelValue: n(s),
              "onUpdate:modelValue": t[0] || (t[0] = (l) => Y(s) ? s.value = l : null),
              options: n(C)
            }, null, 8, ["modelValue", "options"])
          ]),
          "sidebar-start": i(() => [
            f(e.$slots, "sidebar-start")
          ]),
          _: 3
        }, 8, ["configuration", "isDark", "store"])
      ], 512);
    };
  }
});
export {
  ke as default
};
