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