import { defineComponent as g, computed as a, watch as w, createBlock as b, createElementBlock as h, openBlock as v, unref as n, withCtx as f, createVNode as m, createElementVNode as l, toDisplayString as x } from "vue";
import { ScalarListbox as y, ScalarButton as k } from "@scalar/components";
import { ScalarIconCaretDown as U } from "@scalar/icons";
import { useWorkspace as V } from "../../store/store.js";
const B = { class: "overflow-x-auto" }, W = {
  key: 1,
  class: "text-c-1 flex h-auto w-full items-center gap-0.75 rounded-b-xl px-3 py-1.5 text-base/5 whitespace-nowrap"
}, z = { class: "overflow-x-auto" }, j = /* @__PURE__ */ g({
  __name: "ServerSelector",
  props: {
    collection: {},
    server: {},
    target: {}
  },
  emits: ["updateServer"],
  setup(t, { emit: p }) {
    const i = p, { servers: o, collectionMutators: u } = V(), s = a(
      () => t.collection?.servers.map((r) => ({
        id: r,
        label: o[r]?.url ?? "Unknown server"
      }))
    ), c = a({
      get: () => t.server ? s.value.find((r) => r.id === t.server.uid) : void 0,
      set: (r) => {
        if (!r)
          return;
        u.edit(
          t.collection.uid,
          "selectedServerUid",
          r.id
        );
        const e = o[r.id]?.url;
        e && i("updateServer", e);
      }
    });
    w(
      () => t.collection,
      (r) => {
        if (!r || r.selectedServerUid)
          return;
        const e = t.collection.servers?.[0];
        e && (u.edit(t.collection.uid, "selectedServerUid", e), o[e]?.url && i("updateServer", o[e].url));
      }
    );
    const d = a(() => t.server?.url?.endsWith("/") ? t.server.url.slice(0, -1) : t.server?.url || "");
    return (r, e) => s.value.length > 1 ? (v(), b(n(y), {
      key: 0,
      modelValue: c.value,
      "onUpdate:modelValue": e[0] || (e[0] = (S) => c.value = S),
      class: "group",
      options: s.value,
      placement: "bottom-start",
      resize: "",
      target: t.target,
      teleport: `#${t.target}`
    }, {
      default: f(() => [
        m(n(k), {
          class: "bg-b-1 text-c-1 h-auto w-full justify-start gap-1.5 overflow-x-auto rounded-t-none rounded-b-xl px-3 py-1.5 text-base font-normal whitespace-nowrap -outline-offset-1",
          variant: "ghost"
        }, {
          default: f(() => [
            e[1] || (e[1] = l("span", { class: "sr-only" }, "Server:", -1)),
            l("span", B, x(d.value), 1),
            m(n(U), {
              class: "text-c-2 ui-open:rotate-180 mt-px size-3 transition-transform duration-100",
              weight: "bold"
            })
          ]),
          _: 1
        })
      ]),
      _: 1
    }, 8, ["modelValue", "options", "target", "teleport"])) : (v(), h("div", W, [
      e[2] || (e[2] = l("span", { class: "sr-only" }, "Server:", -1)),
      l("span", z, x(d.value), 1)
    ]));
  }
});
export {
  j as default
};
