import { defineComponent as N, computed as m, ref as g, watch as z, useId as D, createBlock as S, createCommentVNode as b, openBlock as f, unref as o, withCtx as c, createVNode as n, createSlots as H, createElementVNode as v, createElementBlock as q, renderSlot as h, toDisplayString as K } from "vue";
import { ScalarCard as $, ScalarCardHeader as M, ScalarCombobox as W, ScalarButton as F, ScalarCardSection as E, ScalarCodeBlock as U, ScalarCardFooter as A } from "@scalar/components";
import { freezeElement as G } from "@scalar/helpers/dom/freeze-element";
import { ScalarIconCaretDown as J } from "@scalar/icons";
import { getResolvedRef as P } from "@scalar/workspace-store/helpers/get-resolved-ref";
import { getResolvedRefDeep as Q } from "../../../../features/example-responses/helpers/get-resolved-ref-deep.js";
import { findClient as V } from "../helpers/find-client.js";
import { generateCustomId as T } from "../helpers/generate-client-options.js";
import { generateCodeSnippet as X } from "../helpers/generate-code-snippet.js";
import { getSecrets as Y } from "../helpers/get-secrets.js";
import Z from "./ExamplePicker.vue2.js";
import B from "../../../../components/HttpMethod/HttpMethod.vue.js";
import { emitCustomEvent as O } from "../../../events/definitions.js";
const _ = ["innerHTML"], ee = { class: "text-base font-normal" }, te = ["id"], le = {
  key: 0,
  class: "request-card-footer-addon"
}, ae = { class: "request-header" }, oe = {}, ye = /* @__PURE__ */ N({
  ...oe,
  __name: "RequestExample",
  props: {
    clientOptions: {},
    selectedClient: {},
    selectedServer: { default: () => ({ url: "/" }) },
    selectedContentType: {},
    selectedExample: {},
    securitySchemes: { default: () => [] },
    method: {},
    path: {},
    operation: {},
    fallback: { type: Boolean },
    generateLabel: { type: Function }
  },
  setup(a) {
    const u = m(() => {
      var s, r;
      const t = ((s = P(a.operation.requestBody)) == null ? void 0 : s.content) ?? {}, e = a.selectedContentType || Object.keys(t)[0];
      return ((r = t[e]) == null ? void 0 : r.examples) ?? {};
    }), C = g(
      a.selectedExample ?? Object.keys(u.value)[0]
    ), y = m(() => [
      "x-custom-examples",
      "x-codeSamples",
      "x-code-samples"
    ].flatMap((e) => a.operation[e] ?? [])), p = m(() => y.value.length ? [
      {
        label: "Code Examples",
        options: y.value.map((e) => {
          const l = T(e), s = e.label || e.lang || l;
          return {
            id: l,
            lang: e.lang || "plaintext",
            title: s,
            label: s
          };
        })
      },
      ...a.clientOptions
    ] : a.clientOptions), d = g(
      V(p.value, a.selectedClient) ?? null
    );
    z(
      () => a.selectedClient,
      (t) => {
        const e = V(p.value, t);
        e && (d.value = e);
      }
    );
    const k = m(() => {
      var t, e, l;
      try {
        if ((t = d.value) != null && t.id.startsWith("custom"))
          return ((e = y.value.find(
            (I) => {
              var x;
              return T(I) === ((x = d.value) == null ? void 0 : x.id);
            }
          )) == null ? void 0 : e.source) ?? "Custom example not found";
        const s = u.value[C.value || ""], r = Q(s), j = (r == null ? void 0 : r.value) ?? (r == null ? void 0 : r.summary);
        return X({
          clientId: (l = d.value) == null ? void 0 : l.id,
          operation: a.operation,
          method: a.method,
          server: a.selectedServer,
          securitySchemes: a.securitySchemes,
          contentType: a.selectedContentType,
          path: a.path,
          example: j
        });
      } catch (s) {
        return console.error("[generateSnippet]", s), "";
      }
    }), R = m(() => Y(a.securitySchemes)), i = g(null), w = (t) => {
      var e;
      if (i.value) {
        const l = G(i.value.$el);
        setTimeout(() => {
          l();
        }, 300);
      }
      d.value = t, t.id.startsWith("custom") || O((e = i.value) == null ? void 0 : e.$el, "scalar-update-selected-client", t.id);
    }, L = D();
    return (t, e) => k.value ? (f(), S(o($), {
      key: 0,
      class: "request-card dark-mode",
      ref_key: "elem",
      ref: i
    }, {
      default: c(() => [
        n(o(M), { class: "pr-2.5" }, H({
          default: c(() => [
            e[3] || (e[3] = v("span", { class: "sr-only" }, "Request Example for", -1)),
            n(o(B), {
              as: "span",
              class: "request-method",
              method: t.method
            }, null, 8, ["method"]),
            t.generateLabel ? (f(), q("span", {
              key: 0,
              innerHTML: t.generateLabel()
            }, null, 8, _)) : h(t.$slots, "header", { key: 1 }, void 0, !0)
          ]),
          _: 2
        }, [
          p.value.length ? {
            name: "actions",
            fn: c(() => [
              n(o(W), {
                class: "max-h-80",
                modelValue: d.value,
                options: p.value,
                teleport: "",
                placement: "bottom-end",
                "onUpdate:modelValue": e[0] || (e[0] = (l) => w(l))
              }, {
                default: c(() => [
                  n(o(F), {
                    "data-testid": "client-picker",
                    class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5",
                    fullWidth: "",
                    variant: "ghost"
                  }, {
                    default: c(() => [
                      v("span", ee, K(d.value.title), 1),
                      n(o(J), {
                        weight: "bold",
                        class: "ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100"
                      })
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              }, 8, ["modelValue", "options"])
            ]),
            key: "0"
          } : void 0
        ]), 1024),
        n(o(E), { class: "request-editor-section custom-scroll p-0" }, {
          default: c(() => {
            var l;
            return [
              v("div", {
                id: `${o(L)}-example`,
                class: "code-snippet"
              }, [
                n(o(U), {
                  class: "bg-b-2 !min-h-full -outline-offset-2",
                  content: k.value,
                  hideCredentials: R.value,
                  lang: (l = d.value) == null ? void 0 : l.lang,
                  lineNumbers: ""
                }, null, 8, ["content", "hideCredentials", "lang"])
              ], 8, te)
            ];
          }),
          _: 1
        }),
        Object.keys(u.value).length || t.$slots.footer ? (f(), S(o(A), {
          key: 0,
          class: "request-card-footer bg-b-3"
        }, {
          default: c(() => [
            Object.keys(u.value).length ? (f(), q("div", le, [
              n(Z, {
                examples: u.value,
                modelValue: C.value,
                "onUpdate:modelValue": [
                  e[1] || (e[1] = (l) => C.value = l),
                  e[2] || (e[2] = (l) => {
                    var s;
                    return o(O)((s = i.value) == null ? void 0 : s.$el, "scalar-update-selected-example", l);
                  })
                ]
              }, null, 8, ["examples", "modelValue"])
            ])) : b("", !0),
            h(t.$slots, "footer", {}, void 0, !0)
          ]),
          _: 3
        })) : b("", !0)
      ]),
      _: 3
    }, 512)) : t.fallback ? (f(), S(o($), {
      key: 1,
      class: "request-card dark-mode"
    }, {
      default: c(() => [
        n(o(E), { class: "request-card-simple" }, {
          default: c(() => [
            v("div", ae, [
              n(o(B), {
                as: "span",
                class: "request-method",
                method: t.method
              }, null, 8, ["method"]),
              h(t.$slots, "header", {}, void 0, !0)
            ]),
            h(t.$slots, "footer", {}, void 0, !0)
          ]),
          _: 3
        })
      ]),
      _: 3
    })) : b("", !0);
  }
});
export {
  ye as default
};
