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