import { defineComponent as p, computed as s, createElementBlock as b, createCommentVNode as f, openBlock as x, createVNode as r, unref as i, withCtx as V, createElementVNode as c, toDisplayString as v } from "vue";
import { ScalarListbox as g } from "@scalar/components";
import { ScalarIconCaretUpDown as h } from "@scalar/icons";
const S = {
  key: 0,
  class: "document-selector -mb-1 p-3 pb-0"
}, w = {
  class: "group/dropdown-label hover:bg-b-2 text-c-2 flex h-8 w-full cursor-pointer items-center rounded border px-2 py-1.75",
  type: "button"
}, _ = { class: "text-c-1 overflow-hidden text-base text-ellipsis" }, k = /* @__PURE__ */ p({
  __name: "DocumentSelector",
  props: {
    options: {},
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(l, { emit: u }) {
    const d = u, m = s(() => {
      var e;
      return l.options && ((e = l.options) == null ? void 0 : e.length) > 1;
    }), a = s(
      () => {
        var e;
        return ((e = l.options) == null ? void 0 : e.map((o, t) => ({
          id: String(t),
          // Get the display text for the selected option
          label: o.title || o.slug || `API #${t + 1}`
        }))) || [];
      }
    ), n = s({
      get: () => a.value.find(({ id: e }) => e === String(l.modelValue)),
      set: (e) => d("update:modelValue", Number(e.id))
    });
    return (e, o) => m.value ? (x(), b("div", S, [
      r(i(g), {
        modelValue: n.value,
        "onUpdate:modelValue": o[0] || (o[0] = (t) => n.value = t),
        options: a.value,
        resize: ""
      }, {
        default: V(() => {
          var t;
          return [
            c("button", w, [
              r(i(h), { class: "mr-1 size-4 text-current" }),
              c("span", _, v(((t = n.value) == null ? void 0 : t.label) || "Select API"), 1)
            ])
          ];
        }),
        _: 1
      }, 8, ["modelValue", "options"])
    ])) : f("", !0);
  }
});
export {
  k as default
};
