import { defineComponent as v, useSlots as C, watch as c, createBlock as u, openBlock as t, normalizeClass as B, createSlots as w, withCtx as n, createVNode as f, unref as s, createCommentVNode as d, createElementBlock as p, renderSlot as m, isRef as D, renderList as M, normalizeProps as $, guardReactiveProps as V } from "vue";
import { OpenApiClientButton as H } from "@scalar/api-client/components";
import { ScalarSidebarFooter as K, ScalarColorModeToggleButton as L } from "@scalar/components";
import { useBreakpoints as N } from "@scalar/use-hooks/useBreakpoints";
import R from "../ApiReferenceLayout.vue.js";
import U from "../MobileHeader.vue.js";
import z from "../../features/Search/SearchButton.vue.js";
import { useSidebar as A } from "../../hooks/useSidebar.js";
import { useNavState as O } from "../../hooks/useNavState.js";
const P = { key: 0 }, T = {
  key: 1,
  class: "scalar-api-references-standalone-search"
}, E = { key: 1 }, Y = /* @__PURE__ */ v({
  __name: "ModernLayout",
  props: {
    configuration: {},
    parsedSpec: {},
    rawSpec: {},
    isDark: { type: Boolean }
  },
  emits: ["toggleDarkMode", "updateContent"],
  setup(g) {
    const l = g, S = C(), { mediaQueries: k } = N(), { isSidebarOpen: a } = A(), h = !1;
    c(k.lg, (e, o) => {
      o && !e && (a.value = !1);
    });
    const { hash: y } = O();
    return c(y, (e, o) => {
      e && e !== o && (a.value = !1);
    }), (e, o) => (t(), u(R, {
      class: B({
        "scalar-api-references-standalone-mobile": e.configuration.showSidebar ?? !0
      }),
      configuration: e.configuration,
      parsedSpec: e.parsedSpec,
      rawSpec: e.rawSpec,
      onUpdateContent: o[2] || (o[2] = (r) => e.$emit("updateContent", r))
    }, w({
      header: n(() => [
        e.configuration.showSidebar ?? !0 ? (t(), u(U, {
          key: 0,
          open: s(a),
          "onUpdate:open": o[0] || (o[0] = (r) => D(a) ? a.value = r : null)
        }, null, 8, ["open"])) : d("", !0)
      ]),
      "sidebar-start": n(({ spec: r }) => {
        var i;
        return [
          e.$slots["document-selector"] ? (t(), p("div", P, [
            m(e.$slots, "document-selector", {}, void 0, !0)
          ])) : d("", !0),
          l.configuration.hideSearch ? d("", !0) : (t(), p("div", T, [
            f(s(z), {
              searchHotKey: (i = l.configuration) == null ? void 0 : i.searchHotKey,
              spec: r
            }, null, 8, ["searchHotKey", "spec"])
          ]))
        ];
      }),
      "sidebar-end": n(() => [
        f(s(K), { class: "darklight-reference" }, {
          toggle: n(() => [
            l.configuration.hideDarkModeToggle ? (t(), p("span", E)) : (t(), u(s(L), {
              key: 0,
              modelValue: e.isDark,
              "onUpdate:modelValue": o[1] || (o[1] = (r) => e.$emit("toggleDarkMode"))
            }, null, 8, ["modelValue"]))
          ]),
          default: n(() => [
            l.configuration.hideClientButton ? d("", !0) : (t(), u(s(H), {
              key: 0,
              buttonSource: "sidebar",
              integration: e.configuration._integration,
              isDevelopment: h,
              url: e.configuration.url
            }, null, 8, ["integration", "url"]))
          ]),
          _: 1
        })
      ]),
      _: 2
    }, [
      M(S, (r, i) => ({
        name: i,
        fn: n((b) => [
          m(e.$slots, i, $(V(b || {})), void 0, !0)
        ])
      }))
    ]), 1032, ["class", "configuration", "parsedSpec", "rawSpec"]));
  }
});
export {
  Y as default
};
