import { defineComponent as I, ref as w, openBlock as n, createElementBlock as l, Fragment as d, renderList as _, unref as t, normalizeClass as a, createElementVNode as o, createVNode as h, toDisplayString as k, createCommentVNode as N, pushScopeId as x, popScopeId as z } from "vue";
import { ScalarIcon as v } from "@scalar/components";
import { useHttpClientStore as B } from "../../../stores/useHttpClientStore.js";
const M = (c) => (x("data-v-1f493fd1"), c = c(), z(), c), T = ["onClick"], J = ["value"], O = ["label"], V = ["value"], $ = { class: "client-libraries-icon__more" }, E = {
  key: 1,
  class: "client-libraries-icon",
  height: "50",
  viewBox: "0 0 50 50",
  width: "50",
  xmlns: "http://www.w3.org/2000/svg"
}, F = /* @__PURE__ */ M(() => /* @__PURE__ */ o("g", {
  fill: "currentColor",
  "fill-rule": "nonzero"
}, [
  /* @__PURE__ */ o("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)), H = [
  F
], L = { key: 0 }, q = /* @__PURE__ */ I({
  __name: "ClientSelector",
  setup(c) {
    const {
      httpClient: r,
      setHttpClient: g,
      availableTargets: y,
      getClientTitle: m,
      getTargetTitle: b
    } = B(), C = w(), p = [
      {
        targetKey: "shell",
        clientKey: "curl"
      },
      {
        targetKey: "ruby",
        clientKey: "native"
      },
      {
        targetKey: "node",
        clientKey: "undici"
      },
      {
        targetKey: "php",
        clientKey: "guzzle"
      },
      {
        targetKey: "python",
        clientKey: "python3"
      }
    ].filter(
      (i) => y.value.find((s) => s.key === i.targetKey && s.clients.find((e) => e.key === i.clientKey))
    ), K = (i) => `programming-language-${i}`, S = (i) => i.targetKey === r.targetKey && i.clientKey === r.clientKey, f = (i) => p.some(
      (s) => s.targetKey === i.targetKey && s.clientKey === i.clientKey
    );
    return (i, s) => (n(), l("div", {
      ref_key: "containerRef",
      ref: C,
      class: "client-libraries-content"
    }, [
      (n(!0), l(d, null, _(t(p), (e) => (n(), l("div", {
        key: e.clientKey,
        class: a(["client-libraries rendered-code-sdks", {
          "client-libraries__active": S(e)
        }]),
        onClick: () => t(g)(e)
      }, [
        o("div", {
          class: a(`client-libraries-icon__${e.targetKey}`)
        }, [
          h(t(v), {
            class: "client-libraries-icon",
            icon: K(e.targetKey)
          }, null, 8, ["icon"])
        ], 2),
        o("span", null, k(t(b)(e)), 1)
      ], 10, T))), 128)),
      o("div", {
        class: a(["client-libraries client-libraries__select", {
          "client-libraries__active": t(r) && !f(t(r))
        }])
      }, [
        o("select", {
          class: "language-select",
          value: JSON.stringify(t(r)),
          onInput: s[0] || (s[0] = (e) => t(g)(JSON.parse(e.target.value)))
        }, [
          (n(!0), l(d, null, _(t(y), (e) => (n(), l("optgroup", {
            key: e.key,
            label: e.title
          }, [
            (n(!0), l(d, null, _(e.clients, (u) => (n(), l("option", {
              key: u.key,
              value: JSON.stringify({
                targetKey: e.key,
                clientKey: u.key
              })
            }, k(t(m)({
              targetKey: e.key,
              clientKey: u.key
            })), 9, V))), 128))
          ], 8, O))), 128))
        ], 40, J),
        o("div", $, [
          t(r) && !f(t(r)) ? (n(), l("div", {
            key: 0,
            class: a(`client-libraries-icon__${t(r).targetKey}`)
          }, [
            h(t(v), {
              class: "client-libraries-icon",
              icon: K(t(r).targetKey)
            }, null, 8, ["icon"])
          ], 2)) : (n(), l("svg", E, H))
        ]),
        t(y).length ? (n(), l("span", L, "More")) : N("", !0)
      ], 2)
    ], 512));
  }
});
export {
  q as default
};
