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

<script lang="ts" setup>
// @ts-ignore
import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
import "swagger-ui-dist/swagger-ui.css"
import "swagger-themes/themes/one-dark.css"

const apiBase = useSolarNetworkUrl()

onMounted(() => {
  const ui = SwaggerUIBundle({
    urls: [
      {
        url: `${apiBase}/swagger/ring/v1/swagger.json`,
        name: "DysonNetwork.Ring"
      },
      {
        url: `${apiBase}/swagger/pass/v1/swagger.json`,
        name: "DysonNetwork.Pass"
      },
      {
        url: `${apiBase}/swagger/sphere/v1/swagger.json`,
        name: "DysonNetwork.Sphere"
      },
      {
        url: `${apiBase}/swagger/drive/v1/swagger.json`,
        name: "DysonNetwork.Drive"
      },
      {
        url: `${apiBase}/swagger/develop/v1/swagger.json`,
        name: "DysonNetwork.Develop"
      },
      {
        url: `${apiBase}/swagger/insight/v1/swagger.json`,
        name: "DysonNetwork.Insight"
      },
      {
        url: `${apiBase}/swagger/zone/v1/swagger.json`,
        name: "DysonNetwork.Zone"
      }
    ],
    dom_id: "#swagger-ui",
    deepLinking: true,
    presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
    layout: "StandaloneLayout"
  })
  // @ts-ignore
  window.ui = ui
})

definePageMeta({
  layout: "minimal"
})

useHead({
  title: "Solar Network API"
})
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

.swagger-ui *:not(:is(pre, pre *, textarea, textarea *)) {
  font-family: var(--font-family) !important;
}

.swagger-ui pre,
.swagger-ui pre *,
.swagger-ui textarea,
.swagger-ui textarea * {
  font-family: "IBM Plex Mono", monospace !important;
}

@media (prefers-color-scheme: dark) {
  .swagger-ui {
    --secondary-text-color: #ffffff !important;
  }
}
</style>
