import { defineComponent as B, openBlock as a, createElementBlock as d, createElementVNode as h, normalizeClass as V, createVNode as p, unref as u, withModifiers as $, createTextVNode as f, createCommentVNode as s, createBlock as N, toDisplayString as A, renderSlot as g } from "vue";
import { ScalarIconButton as E, ScalarIcon as I } from "@scalar/components";
import O from "./SidebarHttpBadge.vue.js";
import { sleep as v } from "../../helpers/sleep.js";
import { joinWithSlash as k } from "../../helpers/joinWithSlash.js";
import { scrollToId as R } from "../../helpers/scrollToId.js";
import { useNavState as _ } from "../../hooks/useNavState.js";
const D = ["id"], L = {
  key: 0,
  class: "sidebar-heading-chevron"
}, T = ["href"], U = { class: "sidebar-heading-link-title" }, z = {
  key: 1,
  class: "sidebar-heading-link-method"
}, P = {
  key: 1,
  class: "action-menu"
}, J = /* @__PURE__ */ B({
  __name: "SidebarElement",
  props: {
    id: {},
    item: {},
    isActive: { type: Boolean },
    hasChildren: { type: Boolean },
    open: { type: Boolean }
  },
  emits: ["toggleOpen"],
  setup(b, { emit: C }) {
    const t = b, c = C, { hash: w, isIntersectionEnabled: r, pathRouting: l } = _(), m = async () => {
      var e, i;
      t.hasChildren && c("toggleOpen"), (i = (e = t.item) == null ? void 0 : e.select) == null || i.call(e), t.open && (r.value = !1, await v(100), r.value = !0);
    }, y = () => {
      if (l.value)
        return k(l.value.basePath, t.item.id);
      {
        const e = new URL(window.location.href);
        return e.hash = t.item.id, `${e.pathname}${e.search}${e.hash}`;
      }
    }, S = async (e) => {
      var i, o;
      if (l.value) {
        e.preventDefault(), t.hasChildren && c("toggleOpen"), (o = (i = t.item) == null ? void 0 : i.select) == null || o.call(i), c("toggleOpen"), r.value = !1, w.value = t.item.id;
        const n = new URL(window.location.href);
        n.pathname = k(l.value.basePath, t.item.id), window.history.pushState({}, "", n), R(t.item.id), await v(100), r.value = !0;
      }
    };
    return (e, i) => {
      var o, n;
      return a(), d("li", {
        id: e.id,
        class: "sidebar-group-item"
      }, [
        h("div", {
          class: V(["sidebar-heading", {
            "sidebar-group-item__folder": e.hasChildren,
            active_page: e.isActive,
            deprecated: e.item.deprecated ?? !1
          }]),
          onClick: m
        }, [
          e.hasChildren ? (a(), d("p", L, [
            p(u(E), {
              class: "toggle-nested-icon",
              icon: e.open ? "ChevronDown" : "ChevronRight",
              label: "Toggle group",
              size: "xs",
              onClick: $(m, ["stop"])
            }, null, 8, ["icon"]),
            f("   ")
          ])) : s("", !0),
          h("a", {
            class: "sidebar-heading-link",
            href: y(),
            onClick: S
          }, [
            (n = (o = e.item) == null ? void 0 : o.icon) != null && n.src ? (a(), N(u(I), {
              key: 0,
              class: "sidebar-icon",
              icon: e.item.icon.src
            }, null, 8, ["icon"])) : s("", !0),
            h("p", U, A(e.item.title), 1),
            e.item.httpVerb && !e.hasChildren ? (a(), d("p", z, [
              f("   "),
              p(O, {
                active: e.isActive,
                method: e.item.httpVerb
              }, null, 8, ["active", "method"])
            ])) : s("", !0)
          ], 8, T)
        ], 2),
        e.open ? g(e.$slots, "default", { key: 0 }, void 0, !0) : s("", !0),
        e.$slots["action-menu"] ? (a(), d("div", P, [
          g(e.$slots, "action-menu", {}, void 0, !0)
        ])) : s("", !0)
      ], 8, D);
    };
  }
});
export {
  J as default
};
