import { defineComponent as y, ref as _, computed as k, createElementBlock as s, openBlock as i, createVNode as m, Fragment as h, renderList as w, createBlock as p, unref as n, normalizeClass as a, withCtx as u, createElementVNode as r, toDisplayString as V, createCommentVNode as f } from "vue";
import { Tab as B } from "@headlessui/vue";
import { ScalarIcon as b, ScalarCombobox as S } from "@scalar/components";
import { freezeElement as z } from "@scalar/helpers/dom/freeze-element";
import { findClient as E } from "../../../v2/blocks/scalar-request-example-block/helpers/find-client.js";
import { emitCustomEvent as K } from "../../../v2/events/definitions.js";
import { isFeaturedClient as g } from "./featured-clients.js";
const M = { class: "client-libraries-text" }, O = {
  "aria-hidden": "true",
  class: "client-libraries-icon__more"
}, T = {
  key: 1,
  class: "client-libraries-icon",
  height: "50",
  role: "presentation",
  viewBox: "0 0 50 50",
  width: "50",
  xmlns: "http://www.w3.org/2000/svg"
}, N = {
  key: 0,
  class: "client-libraries-text client-libraries-text-more"
}, P = /* @__PURE__ */ y({
  __name: "ClientSelector",
  props: {
    clientOptions: {},
    selectedClient: {},
    featuredClients: {},
    morePanel: {}
  },
  setup(v) {
    const o = _(), d = (e) => `programming-language-${e === "js" ? "javascript" : e}`, C = (e) => {
      if (!o.value)
        return;
      const t = z(o.value);
      setTimeout(() => {
        t();
      }, 300), K(
        o.value,
        "scalar-update-selected-client",
        e.id
      );
    }, c = k(
      () => {
        var e;
        return (e = v.selectedClient) == null ? void 0 : e.split("/")[0];
      }
    );
    return (e, t) => (i(), s("div", {
      ref_key: "containerRef",
      ref: o,
      class: "client-libraries-content"
    }, [
      (i(!0), s(h, null, w(e.featuredClients, (l) => (i(), p(n(B), {
        key: l.clientKey,
        class: a(["client-libraries rendered-code-sdks", {
          "client-libraries__active": l.id === e.selectedClient
        }])
      }, {
        default: u(() => [
          r("div", {
            class: a(`client-libraries-icon__${l.targetKey}`)
          }, [
            m(n(b), {
              class: "client-libraries-icon",
              icon: d(l.targetKey)
            }, null, 8, ["icon"])
          ], 2),
          r("span", M, V(l.targetTitle), 1)
        ]),
        _: 2
      }, 1032, ["class"]))), 128)),
      m(n(S), {
        options: e.clientOptions,
        modelValue: n(E)(e.clientOptions, e.selectedClient),
        "onUpdate:modelValue": t[0] || (t[0] = (l) => C(l)),
        placement: "bottom-end",
        teleport: ""
      }, {
        default: u(() => [
          r("button", {
            class: a(["client-libraries client-libraries__select", {
              "client-libraries__active": e.selectedClient && !n(g)(e.selectedClient)
            }])
          }, [
            r("div", O, [
              e.selectedClient && !n(g)(e.selectedClient) ? (i(), s("div", {
                key: 0,
                class: a(`client-libraries-icon__${c.value}`)
              }, [
                c.value ? (i(), p(n(b), {
                  key: 0,
                  class: "client-libraries-icon",
                  icon: d(c.value)
                }, null, 8, ["icon"])) : f("", !0)
              ], 2)) : (i(), s("svg", T, t[1] || (t[1] = [
                r("g", {
                  fill: "currentColor",
                  "fill-rule": "nonzero"
                }, [
                  r("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.clientOptions.length ? (i(), s("span", N, " More ")) : f("", !0),
            t[2] || (t[2] = r("span", { class: "sr-only" }, "Select from all clients", -1))
          ], 2)
        ]),
        _: 1
      }, 8, ["options", "modelValue"])
    ], 512));
  }
});
export {
  P as default
};
