import { defineComponent as $, mergeModels as N, computed as o, useModel as D, onBeforeMount as I, ref as b, watch as M, useId as W, createBlock as i, createCommentVNode as m, openBlock as s, unref as a, withCtx as n, createVNode as r, createSlots as R, createElementVNode as x, createElementBlock as C, renderSlot as p, createTextVNode as z, toDisplayString as U } from "vue";
import { ScalarCard as S, ScalarCardHeader as A, ScalarCombobox as F, ScalarButton as K, ScalarCardSection as T, ScalarCodeBlock as Z, ScalarVirtualText as G, ScalarCardFooter as J } from "@scalar/components";
import { freezeElement as P } from "@scalar/helpers/dom/freeze-element";
import { ScalarIconCaretDown as Q } from "@scalar/icons";
import { getResolvedRef as X } from "@scalar/workspace-store/helpers/get-resolved-ref";
import { operationToHar as Y } from "../helpers/operation-to-har/operation-to-har.js";
import B from "./HttpMethod.vue.js";
import { findClient as V } from "../helpers/find-client.js";
import { getClients as _ } from "../helpers/get-clients.js";
import { getCustomCodeSamples as ee } from "../helpers/get-custom-code-samples.js";
import { getSecrets as te } from "../helpers/get-secrets.js";
import { generateCodeSnippet as le } from "../helpers/generate-code-snippet.js";
import ae from "./ExamplePicker.vue.js";
const oe = ["innerHTML"], ne = ["id"], se = {
  key: 0,
  class: "request-card-footer-addon"
}, re = { class: "request-header" }, ue = {}, Ce = /* @__PURE__ */ $({
  ...ue,
  __name: "OperationCodeSample",
  props: /* @__PURE__ */ N({
    integration: {},
    clientOptions: {},
    selectedClient: {},
    selectedServer: { default: null },
    selectedContentType: {},
    selectedExample: {},
    eventBus: {},
    securitySchemes: { default: () => [] },
    method: {},
    path: {},
    operation: {},
    fallback: { type: Boolean },
    generateLabel: { type: Function },
    isWebhook: { type: Boolean },
    globalCookies: {}
  }, {
    selectedExample: {
      default: ""
    },
    selectedExampleModifiers: {}
  }),
  emits: ["update:selectedExample"],
  setup(e) {
    const d = o(() => {
      const t = X(e.operation.requestBody)?.content ?? {}, l = e.selectedContentType || Object.keys(t)[0];
      return l ? t[l]?.examples ?? {} : {};
    }), u = D(e, "selectedExample");
    I(() => {
      u.value ||= Object.keys(d.value)[0] ?? "";
    });
    const g = o(() => ee(e.operation)), f = o(
      () => _(g.value, e.clientOptions)
    ), c = b(
      V(f.value, e.selectedClient)
    );
    M(
      () => e.selectedClient,
      (t) => {
        const l = V(f.value, t);
        l && (c.value = l);
      }
    );
    const y = o(() => {
      if (!e.isWebhook) return null;
      try {
        return Y({
          operation: e.operation,
          method: e.method,
          path: e.path,
          example: u.value
        });
      } catch (t) {
        return console.error("[webhookHar]", t), null;
      }
    }), h = o(() => e.isWebhook ? y.value?.postData?.text ?? "" : le({
      includeDefaultHeaders: e.integration === "client",
      clientId: c.value?.id,
      customCodeSamples: g.value,
      operation: e.operation,
      method: e.method,
      path: e.path,
      contentType: e.selectedContentType,
      server: e.selectedServer,
      securitySchemes: e.securitySchemes,
      example: u.value,
      globalCookies: e.globalCookies
    })), q = o(() => e.isWebhook ? E.value : c.value?.lang), E = o(() => {
      if (!y.value?.postData) return "json";
      const t = y.value.postData.mimeType;
      return t?.includes("json") ? "json" : t?.includes("xml") ? "xml" : t?.includes("yaml") || t?.includes("yml") ? "yaml" : t?.includes("text/plain") ? "text" : "json";
    }), w = o(() => te(e.securitySchemes)), k = b(null), H = (t) => {
      if (k.value) {
        const l = P(k.value.$el);
        setTimeout(() => {
          l();
        }, 300);
      }
      c.value = t, t && !t.id.startsWith("custom") && e.eventBus.emit("workspace:update:selected-client", t.id);
    }, O = 2e4, j = o(
      () => (h.value.length ?? 0) > O
    ), L = W();
    return (t, l) => h.value ? (s(), i(a(S), {
      key: 0,
      ref_key: "elem",
      ref: k,
      class: "request-card dark-mode"
    }, {
      default: n(() => [
        r(a(A), { class: "pr-2.5" }, R({
          default: n(() => [
            l[2] || (l[2] = x("span", { class: "sr-only" }, "Request Example for", -1)),
            r(B, {
              as: "span",
              class: "request-method",
              method: e.method
            }, null, 8, ["method"]),
            e.generateLabel ? (s(), C("span", {
              key: 0,
              innerHTML: e.generateLabel()
            }, null, 8, oe)) : m("", !0),
            p(t.$slots, "header", {}, void 0, !0)
          ]),
          _: 2
        }, [
          !e.isWebhook && f.value.length ? {
            name: "actions",
            fn: n(() => [
              r(a(F), {
                class: "max-h-80",
                modelValue: c.value,
                options: f.value,
                placement: "bottom-end",
                teleport: "",
                "onUpdate:modelValue": l[0] || (l[0] = (v) => H(v))
              }, {
                default: n(() => [
                  r(a(K), {
                    class: "text-c-2 hover:text-c-1 flex h-full w-fit gap-1.5 px-0.5 py-0 text-base font-normal",
                    "data-testid": "client-picker",
                    variant: "ghost"
                  }, {
                    default: n(() => [
                      z(U(c.value?.title) + " ", 1),
                      r(a(Q), {
                        class: "ui-open:rotate-180 mt-0.25 size-3 transition-transform duration-100",
                        weight: "bold"
                      })
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              }, 8, ["modelValue", "options"])
            ]),
            key: "0"
          } : void 0
        ]), 1024),
        r(a(T), { class: "request-editor-section custom-scroll p-0" }, {
          default: n(() => [
            x("div", {
              id: `${a(L)}-example`,
              class: "code-snippet"
            }, [
              j.value ? (s(), i(a(G), {
                key: 1,
                containerClass: "custom-scroll scalar-code-block border rounded-b flex flex-1 max-h-screen",
                contentClass: "language-plaintext whitespace-pre font-code text-base",
                lineHeight: 20,
                text: h.value
              }, null, 8, ["text"])) : (s(), i(a(Z), {
                key: 0,
                class: "bg-b-2 h-full",
                content: h.value,
                hideCredentials: w.value,
                lang: q.value,
                lineNumbers: ""
              }, null, 8, ["content", "hideCredentials", "lang"]))
            ], 8, ne)
          ]),
          _: 1
        }),
        Object.keys(d.value).length > 1 || t.$slots.footer ? (s(), i(a(J), {
          key: 0,
          class: "request-card-footer bg-b-3"
        }, {
          default: n(() => [
            Object.keys(d.value).length > 1 ? (s(), C("div", se, [
              Object.keys(d.value).length ? (s(), i(ae, {
                key: 0,
                modelValue: u.value,
                "onUpdate:modelValue": l[1] || (l[1] = (v) => u.value = v),
                examples: d.value
              }, null, 8, ["modelValue", "examples"])) : m("", !0)
            ])) : m("", !0),
            p(t.$slots, "footer", { exampleName: u.value }, void 0, !0)
          ]),
          _: 3
        })) : m("", !0)
      ]),
      _: 3
    }, 512)) : e.fallback ? (s(), i(a(S), {
      key: 1,
      class: "request-card dark-mode"
    }, {
      default: n(() => [
        r(a(T), { class: "request-card-simple" }, {
          default: n(() => [
            x("div", re, [
              r(B, {
                as: "span",
                class: "request-method",
                method: e.method
              }, null, 8, ["method"]),
              p(t.$slots, "header", {}, void 0, !0)
            ]),
            p(t.$slots, "footer", { exampleName: u.value }, void 0, !0)
          ]),
          _: 3
        })
      ]),
      _: 3
    })) : m("", !0);
  }
});
export {
  Ce as default
};
