import { defineComponent as S, ref as w, createElementBlock as r, openBlock as l, createElementVNode as n, Fragment as u, renderList as p, unref as e, createBlock as x, normalizeClass as c, withCtx as N, createVNode as g, toDisplayString as b, createCommentVNode as B } from "vue";
import { Tab as T } from "@headlessui/vue";
import { ScalarIcon as f } from "@scalar/components";
import { useFeaturedHttpClients as $ } from "./useFeaturedHttpClients.js";
import { useHttpClientStore as M } from "../../../stores/useHttpClientStore.js";
const F = { class: "client-libraries-text" }, H = ["aria-controls", "value"], I = ["label"], J = ["aria-label", "value"], O = {
  "aria-hidden": "true",
  class: "client-libraries-icon__more"
}, V = {
  key: 1,
  class: "client-libraries-icon",
  height: "50",
  role: "presentation",
  viewBox: "0 0 50 50",
  width: "50",
  xmlns: "http://www.w3.org/2000/svg"
}, j = {
  key: 0,
  class: "client-libraries-text client-libraries-text-more"
}, q = /* @__PURE__ */ S({
  __name: "ClientSelector",
  props: {
    morePanel: {}
  },
  setup(z) {
    const {
      httpClient: i,
      setHttpClient: v,
      availableTargets: y,
      getClientTitle: d,
      getTargetTitle: k
    } = M(), { featuredClients: K, isFeatured: _ } = $(), C = w(), m = (s) => `programming-language-${s === "js" ? "javascript" : s}`, h = (s) => s.targetKey === i.targetKey && s.clientKey === i.clientKey;
    return (s, a) => (l(), r("div", {
      ref_key: "containerRef",
      ref: C,
      class: "client-libraries-content"
    }, [
      (l(!0), r(u, null, p(e(K), (t) => (l(), x(e(T), {
        key: t.clientKey,
        class: c(["client-libraries rendered-code-sdks", {
          "client-libraries__active": h(t)
        }])
      }, {
        default: N(() => [
          n("div", {
            class: c(`client-libraries-icon__${t.targetKey}`)
          }, [
            g(e(f), {
              class: "client-libraries-icon",
              icon: m(t.targetKey)
            }, null, 8, ["icon"])
          ], 2),
          n("span", F, b(e(k)(t)), 1)
        ]),
        _: 2
      }, 1032, ["class"]))), 128)),
      n("label", {
        class: c(["client-libraries client-libraries__select", {
          "client-libraries__active": e(i) && !e(_)(e(i))
        }])
      }, [
        n("select", {
          "aria-controls": s.morePanel,
          class: "language-select",
          value: JSON.stringify(e(i)),
          onInput: a[0] || (a[0] = (t) => e(v)(JSON.parse(t.target.value)))
        }, [
          (l(!0), r(u, null, p(e(y), (t) => (l(), r("optgroup", {
            key: t.key,
            label: t.title
          }, [
            (l(!0), r(u, null, p(t.clients, (o) => (l(), r("option", {
              key: o.client,
              "aria-label": `${t.title} ${e(d)({
                targetKey: t.key,
                clientKey: o.client
              })}`,
              value: JSON.stringify({
                targetKey: t.key,
                clientKey: o.client
              })
            }, b(e(d)({
              targetKey: t.key,
              clientKey: o.client
            })), 9, J))), 128))
          ], 8, I))), 128))
        ], 40, H),
        n("div", O, [
          e(i) && !e(_)(e(i)) ? (l(), r("div", {
            key: 0,
            class: c(`client-libraries-icon__${e(i).targetKey}`)
          }, [
            g(e(f), {
              class: "client-libraries-icon",
              icon: m(e(i).targetKey)
            }, null, 8, ["icon"])
          ], 2)) : (l(), r("svg", V, a[1] || (a[1] = [
            n("g", {
              fill: "currentColor",
              "fill-rule": "nonzero"
            }, [
              n("path", { d: "M10.71 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M21.13 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0M31.55 25.3a3.87 3.87 0 1 0 7.74 0 3.87 3.87 0 0 0-7.74 0" })
            ], -1)
          ])))
        ]),
        e(y).length ? (l(), r("span", j, " More ")) : B("", !0),
        a[2] || (a[2] = n("span", { class: "sr-only" }, "Select from all clients", -1))
      ], 2)
    ], 512));
  }
});
export {
  q as default
};
