import { defineComponent as T, watch as s, computed as g, toRef as C, openBlock as u, createElementBlock as b, Fragment as A, createBlock as v, resolveDynamicComponent as S, withCtx as k, createTextVNode as B, toDisplayString as E, createCommentVNode as R, unref as a, renderSlot as H } from "vue";
import { useAuthenticationStore as N } from "@scalar/api-client";
import { migrateThemeVariables as V } from "@scalar/themes";
import { createHead as _, useSeoMeta as $ } from "unhead";
import F from "./Layouts/index.js";
import { useDarkModeState as U } from "../hooks/useDarkModeState.js";
import { useReactiveSpec as j } from "../hooks/useReactiveSpec.js";
import { useHttpClientStore as q } from "../stores/useHttpClientStore.js";
const Q = /* @__PURE__ */ T({
  __name: "ApiReference",
  props: {
    configuration: {}
  },
  emits: ["updateContent"],
  setup(y) {
    var f, l;
    const o = y, { toggleDarkMode: c, isDark: m } = U(
      (f = o.configuration) == null ? void 0 : f.darkMode
    );
    s(
      () => {
        var e;
        return (e = o.configuration) == null ? void 0 : e.darkMode;
      },
      (e) => {
        e !== m.value && c();
      }
    );
    const i = g(() => {
      var e, t;
      if ((e = o.configuration) != null && e.customCss)
        return V((t = o.configuration) == null ? void 0 : t.customCss);
    });
    s(i, () => console.log(i.value));
    const r = g(() => {
      var e;
      return {
        spec: {
          content: void 0,
          url: void 0,
          ...(e = o.configuration) == null ? void 0 : e.spec
        },
        proxy: void 0,
        theme: "default",
        showSidebar: !0,
        isEditable: !1,
        ...o.configuration,
        customCss: i.value
      };
    });
    (l = r.value) != null && l.metaData && (_(), $(r.value.metaData));
    function p(e, t) {
      s(
        () => {
          var n;
          return (n = r.value) == null ? void 0 : n[e];
        },
        (n) => {
          typeof n < "u" && t(n);
        },
        { immediate: !0 }
      );
    }
    const { setAuthentication: D } = N();
    p("authentication", D);
    const { setExcludedClients: h } = q();
    p("hiddenClients", h);
    const { parsedSpec: x, rawSpec: M } = j({
      proxy: C(() => {
        var e;
        return ((e = o.configuration) == null ? void 0 : e.proxy) || "";
      }),
      specConfig: C(() => {
        var e;
        return ((e = o.configuration) == null ? void 0 : e.spec) || {};
      })
    });
    return (e, t) => {
      var n, d;
      return u(), b(A, null, [
        (n = r.value) != null && n.customCss ? (u(), v(S("style"), { key: 0 }, {
          default: k(() => [
            B(E(r.value.customCss), 1)
          ]),
          _: 1
        })) : R("", !0),
        (u(), v(S(a(F)[((d = r.value) == null ? void 0 : d.layout) || "modern"]), {
          configuration: r.value,
          isDark: a(m),
          parsedSpec: a(x),
          rawSpec: a(M),
          onToggleDarkMode: t[0] || (t[0] = () => a(c)()),
          onUpdateContent: t[1] || (t[1] = (w) => e.$emit("updateContent", w))
        }, {
          footer: k(() => [
            H(e.$slots, "footer")
          ]),
          _: 3
        }, 40, ["configuration", "isDark", "parsedSpec", "rawSpec"]))
      ], 64);
    };
  }
});
export {
  Q as default
};
