import { defineComponent, useId, computed, useTemplateRef, createElementBlock, createCommentVNode, openBlock, createVNode, unref, withCtx, createElementVNode, Fragment, normalizeClass, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
import { TabGroup, TabList, TabPanels, TabPanel } from "@headlessui/vue";
import { DEFAULT_CLIENT } from "@scalar/api-client/v2/blocks/operation-code-sample";
import { ScalarMarkdown, ScalarCodeBlock } from "@scalar/components";
import { emitCustomEvent } from "@scalar/workspace-store/events";
import ClientSelector from "./ClientSelector.vue.js";
import { getFeaturedClients, isFeaturedClient } from "./featured-clients.js";
const _hoisted_1 = {
  key: 0,
  ref: "wrapper-ref"
};
const _hoisted_2 = ["id"];
const _hoisted_3 = {
  key: 1,
  class: "selected-client card-footer border-t-0 p-0",
  role: "tabpanel",
  tabindex: "1"
};
const _hoisted_4 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ClientLibraries",
  props: {
    document: {},
    clientOptions: {},
    selectedClient: { default: () => DEFAULT_CLIENT }
  },
  setup(__props, { expose: __expose }) {
    const headingId = useId();
    const morePanel = useId();
    const selectedClientOption = computed(
      () => __props.clientOptions.flatMap(
        (option) => option.options.find((option2) => option2.id === __props.selectedClient) ?? []
      )[0]
    );
    const featuredClients = computed(() => getFeaturedClients(__props.clientOptions));
    const tabIndex = computed(
      () => featuredClients.value.findIndex(
        (featuredClient) => __props.selectedClient === featuredClient.id
      )
    );
    const wrapper = useTemplateRef("wrapper-ref");
    const onTabSelect = (i) => {
      const client = featuredClients.value[i];
      if (!client || !wrapper.value) {
        return;
      }
      emitCustomEvent(wrapper.value, "scalar-update-selected-client", client.id);
    };
    const installationInstructions = computed(() => {
      const XScalarSdkInstallation = __props.document.info["x-scalar-sdk-installation"];
      if (!Array.isArray(XScalarSdkInstallation) || !XScalarSdkInstallation?.length) {
        return void 0;
      }
      const instruction = XScalarSdkInstallation.find((instruction2) => {
        const targetKey = __props.selectedClient?.split("/")[0]?.toLowerCase();
        return instruction2.lang.toLowerCase() === targetKey;
      });
      if (!instruction) {
        return void 0;
      }
      return instruction;
    });
    __expose({
      selectedClientOption
    });
    return (_ctx, _cache) => {
      return _ctx.clientOptions.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(unref(TabGroup), {
          manual: "",
          selectedIndex: tabIndex.value,
          onChange: onTabSelect
        }, {
          default: withCtx(() => [
            createElementVNode("div", {
              id: unref(headingId),
              class: "client-libraries-heading"
            }, " Client Libraries ", 8, _hoisted_2),
            createVNode(unref(TabList), {
              "aria-labelledby": unref(headingId),
              class: "client-libraries-list"
            }, {
              default: withCtx(() => [
                createVNode(ClientSelector, {
                  clientOptions: _ctx.clientOptions,
                  featuredClients: featuredClients.value,
                  morePanel: unref(morePanel),
                  selectedClient: _ctx.selectedClient
                }, null, 8, ["clientOptions", "featuredClients", "morePanel", "selectedClient"])
              ]),
              _: 1
            }, 8, ["aria-labelledby"]),
            createVNode(unref(TabPanels), null, {
              default: withCtx(() => [
                installationInstructions.value?.source || installationInstructions.value?.description ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                  installationInstructions.value.description ? (openBlock(), createElementBlock("div", {
                    key: 0,
                    class: normalizeClass(["selected-client card-footer -outline-offset-2", installationInstructions.value.source && "rounded-b-none"]),
                    role: "tabpanel",
                    tabindex: "0"
                  }, [
                    createVNode(unref(ScalarMarkdown), {
                      value: installationInstructions.value.description
                    }, null, 8, ["value"])
                  ], 2)) : createCommentVNode("", true),
                  installationInstructions.value.source ? (openBlock(), createElementBlock("div", _hoisted_3, [
                    createVNode(unref(ScalarCodeBlock), {
                      class: "rounded-t-none rounded-b-lg px-3 py-2 -outline-offset-1 has-focus:outline",
                      content: installationInstructions.value.source,
                      copy: true,
                      lang: "shell"
                    }, null, 8, ["content"])
                  ])) : createCommentVNode("", true)
                ], 64)) : unref(isFeaturedClient)(_ctx.selectedClient) ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(featuredClients.value, (client) => {
                  return openBlock(), createBlock(unref(TabPanel), {
                    key: client.id,
                    class: "selected-client card-footer -outline-offset-2"
                  }, {
                    default: withCtx(() => [
                      createTextVNode(toDisplayString(client.title), 1)
                    ]),
                    _: 2
                  }, 1024);
                }), 128)) : (openBlock(), createElementBlock("div", {
                  key: 2,
                  id: unref(morePanel),
                  class: "selected-client card-footer -outline-offset-2",
                  role: "tabpanel",
                  tabindex: "0"
                }, toDisplayString(selectedClientOption.value?.title), 9, _hoisted_4))
              ]),
              _: 1
            })
          ]),
          _: 1
        }, 8, ["selectedIndex"])
      ], 512)) : createCommentVNode("", true);
    };
  }
});
export {
  _sfc_main as default
};
