import { defineComponent, ref, computed, createElementBlock, openBlock, createVNode, Fragment, renderList, createBlock, unref, normalizeClass, withCtx, createElementVNode, toDisplayString, createCommentVNode } from "vue";
import { Tab } from "@headlessui/vue";
import { findClient } from "@scalar/api-client/v2/blocks/operation-code-sample";
import { ScalarIcon, ScalarCombobox } from "@scalar/components";
import { freezeElement } from "@scalar/helpers/dom/freeze-element";
import { isFeaturedClient } from "../helpers/featured-clients.js";
const _hoisted_1 = { class: "client-libraries-text" };
const _hoisted_2 = {
  "aria-hidden": "true",
  class: "client-libraries-icon__more"
};
const _hoisted_3 = {
  key: 1,
  class: "client-libraries-icon",
  height: "50",
  role: "presentation",
  viewBox: "0 0 50 50",
  width: "50",
  xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_4 = {
  key: 0,
  class: "client-libraries-text client-libraries-text-more"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ClientDropdown",
  props: {
    clientOptions: {},
    selectedClient: {},
    featuredClients: {},
    eventBus: {}
  },
  setup(__props) {
    const containerRef = ref();
    const getIconByLanguageKey = (targetKey) => `programming-language-${targetKey === "js" ? "javascript" : targetKey}`;
    const selectClient = (option) => {
      if (!containerRef.value) {
        return;
      }
      const unfreeze = freezeElement(containerRef.value);
      setTimeout(() => {
        unfreeze();
      }, 300);
      if (option.clientKey !== "custom") {
        __props.eventBus.emit("workspace:update:selected-client", option.id);
      }
    };
    const selectedTargetKey = computed(
      () => __props.selectedClient?.split("/")[0]
    );
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: "client-libraries-content"
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.featuredClients, (featuredClient) => {
          return openBlock(), createBlock(unref(Tab), {
            key: featuredClient.clientKey,
            class: normalizeClass(["client-libraries rendered-code-sdks", {
              "client-libraries__active": featuredClient.id === _ctx.selectedClient
            }])
          }, {
            default: withCtx(() => [
              createElementVNode("div", {
                class: normalizeClass(`client-libraries-icon__${featuredClient.targetKey}`)
              }, [
                createVNode(unref(ScalarIcon), {
                  class: "client-libraries-icon",
                  icon: getIconByLanguageKey(featuredClient.targetKey)
                }, null, 8, ["icon"])
              ], 2),
              createElementVNode("span", _hoisted_1, toDisplayString(featuredClient.targetTitle), 1)
            ]),
            _: 2
          }, 1032, ["class"]);
        }), 128)),
        createVNode(unref(ScalarCombobox), {
          modelValue: unref(findClient)(_ctx.clientOptions, _ctx.selectedClient),
          options: _ctx.clientOptions,
          placement: "bottom-end",
          teleport: "",
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectClient($event))
        }, {
          default: withCtx(() => [
            createElementVNode("button", {
              class: normalizeClass(["client-libraries client-libraries__select", {
                "client-libraries__active": _ctx.selectedClient && !unref(isFeaturedClient)(_ctx.selectedClient)
              }]),
              type: "button"
            }, [
              createElementVNode("div", _hoisted_2, [
                _ctx.selectedClient && !unref(isFeaturedClient)(_ctx.selectedClient) ? (openBlock(), createElementBlock("div", {
                  key: 0,
                  class: normalizeClass(`client-libraries-icon__${selectedTargetKey.value}`)
                }, [
                  selectedTargetKey.value ? (openBlock(), createBlock(unref(ScalarIcon), {
                    key: 0,
                    class: "client-libraries-icon",
                    icon: getIconByLanguageKey(selectedTargetKey.value)
                  }, null, 8, ["icon"])) : createCommentVNode("", true)
                ], 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[1] || (_cache[1] = [
                  createElementVNode("g", {
                    fill: "currentColor",
                    "fill-rule": "nonzero"
                  }, [
                    createElementVNode("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)
                ])]))
              ]),
              _ctx.clientOptions.length ? (openBlock(), createElementBlock("span", _hoisted_4, " More ")) : createCommentVNode("", true),
              _cache[2] || (_cache[2] = createElementVNode("span", { class: "sr-only" }, "Select from all clients", -1))
            ], 2)
          ]),
          _: 1
        }, 8, ["modelValue", "options"])
      ], 512);
    };
  }
});
export {
  _sfc_main as default
};
