import { defineComponent as y, computed as p, createBlock as f, openBlock as a, unref as o, withCtx as u, createVNode as l, createElementBlock as d, Fragment as v, createElementVNode as s, createTextVNode as U, toDisplayString as C, createCommentVNode as w, renderList as h } from "vue";
import { ScalarPopover as B, ScalarButton as $, ScalarFloatingBackdrop as N } from "@scalar/components";
import { ScalarIconPlus as V, ScalarIconPencilSimple as z } from "@scalar/icons";
import D from "../layout/ValueEmitter.vue.js";
import I from "./ServerDropdownItem.vue.js";
const P = ["onClick"], q = { class: "flex items-center justify-center" }, E = {
  name: "ServerDropdown"
}, L = /* @__PURE__ */ y({
  ...E,
  props: {
    meta: {},
    servers: {},
    server: {},
    target: {},
    layout: {}
  },
  emits: ["update:selectedServer", "update:variable", "update:servers", "update:open"],
  setup(t, { emit: x }) {
    const n = x, S = p(
      () => t.servers.map((i) => ({
        id: i.url,
        label: i.url ?? "Unknown server"
      }))
    ), b = p(() => t.server?.url?.endsWith("/") ? t.server.url.slice(0, -1) : t.server?.url || "");
    return (i, e) => (a(), f(o(B), {
      class: "max-h-[inherit] p-0 text-base",
      focus: "",
      offset: 0,
      placement: "bottom",
      resize: "",
      target: t.target,
      teleport: `#${t.target}`
    }, {
      popover: u(({ close: m }) => [
        s("div", {
          class: "custom-scroll flex max-h-[inherit] flex-col gap-1 p-1",
          onClick: m
        }, [
          (a(!0), d(v, null, h(S.value, (r, g) => (a(), f(I, {
            key: r.id,
            server: t.server,
            serverOption: r,
            type: "request",
            "onUpdate:selectedServer": (c) => n("update:selectedServer", { url: r.id, meta: t.meta }),
            "onUpdate:variable": (c, k) => n("update:variable", { index: g, key: c, value: k, meta: t.meta })
          }, null, 8, ["server", "serverOption", "onUpdate:selectedServer", "onUpdate:variable"]))), 128)),
          t.layout !== "modal" ? (a(), d("button", {
            key: 0,
            class: "text-xxs hover:bg-b-2 flex cursor-pointer items-center gap-1.5 rounded p-1.75",
            type: "button",
            onClick: e[0] || (e[0] = (r) => n("update:servers"))
          }, [
            s("div", q, [
              l(o(z), { class: "size-4" })
            ]),
            e[5] || (e[5] = s("span", null, "Update Servers", -1))
          ])) : w("", !0)
        ], 8, P)
      ]),
      backdrop: u(({ open: m }) => [
        l(D, {
          value: m,
          onChange: e[1] || (e[1] = (r) => n("update:open", r)),
          onUnmount: e[2] || (e[2] = (r) => n("update:open", !1))
        }, null, 8, ["value"]),
        l(o(N), { class: "inset-x-px rounded-none rounded-b-lg" })
      ]),
      default: u(() => [
        l(o($), {
          class: "hover:bg-b-2 font-code text-c-2 ml-0.75 h-auto gap-0.75 rounded border px-1.5 text-base whitespace-nowrap",
          variant: "ghost"
        }, {
          default: u(() => [
            t.server ? (a(), d(v, { key: 0 }, [
              e[3] || (e[3] = s("span", { class: "sr-only" }, "Server:", -1)),
              U(" " + C(b.value), 1)
            ], 64)) : (a(), d(v, { key: 1 }, [
              e[4] || (e[4] = s("span", { class: "sr-only" }, "Add Server", -1)),
              l(o(V), { class: "size-3" })
            ], 64))
          ]),
          _: 1
        })
      ]),
      _: 1
    }, 8, ["target", "teleport"]));
  }
});
export {
  L as default
};
