<template>
  <div id="swagger-ui" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import SwaggerUI from "swagger-ui-dist/swagger-ui-es-bundle.js";
import "swagger-ui-dist/swagger-ui.css";

import http from "@/plugins/http";
import config from "@/app.config";

// บอก TypeScript ว่า swagger-ui มี preset
// (เพราะ type definition ใน swagger-ui-dist ไม่มีให้ครบ)
interface SwaggerUIBundle {
  presets: any;
  [key: string]: any;
}
// URL ของ Swagger JSON API ของคุณตรงนี้
// const swaggerUrl: string = "https://petstore.swagger.io/v2/swagger.json";
const swaggerJson = ref();
async function fetchSwaggerJson() {
  swaggerJson.value = await http
    .get(`${config.API.apiManualSwagger}`)
    .then((res) => {
      return res.data.result;
    })
    .catch((error) => {
      console.error("Error fetching Swagger JSON:", error);
      return null; // หรือจัดการข้อผิดพลาดตามที่คุณต้องการ
    });
}

onMounted(async () => {
  await fetchSwaggerJson();
  SwaggerUI({
    dom_id: "#swagger-ui",
    // url: swaggerUrl,
    spec: swaggerJson.value,
  });
});
</script>

<style>
.swagger-ui h2.title {
  line-height: 1rem;
}
.swagger-ui .scheme-container {
  margin: 0 0 0px;
  padding: 0px 0px 20px;
}
.swagger-ui .scheme-container .schemes .auth-wrapper {
  justify-content: end;
}
</style>
