<script lang="ts">/**
 * Wrapper around 'ThemeViewGui', which is responsible for some boiler plate things, such as:
 *
 * - Checking for WebGL support
 * - Loading the available layers
 * - ...
 */
import ThemeViewGUI from "./ThemeViewGUI.svelte"
import Constants from "../Models/Constants.js"
import { Utils } from "../Utils.js"
import { UIEventSource } from "../Logic/UIEventSource"
import { WithSearchState } from "../Models/ThemeViewState/WithSearchState"
import ThemeConfig from "../Models/ThemeConfig/ThemeConfig"

function webgl_support() {
  try {
    const canvas = document.createElement("canvas")
    if (
      !!window.WebGLRenderingContext &&
      (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
    ) {
      return true
    }
  } catch (e) {
    return false
  }
}


async function getAvailableLayers(): Promise<Set<string>> {
  if (!Constants.SummaryServer) {
    return new Set<string>()
  }
  try {
    const host = new URL(Constants.SummaryServer).host
    const status: { layers: string[] } = await Promise.any([
      Utils.downloadJson<{ layers }>("https://" + host + "/summary/status.json"),
      Utils.waitFor(2500, { layers: [] })
    ])
    return new Set<string>(status.layers)
  } catch (e) {
    console.error("Could not get MVT available layers due to", e)
    return new Set<string>()
  }
}

export let theme: ThemeConfig

let webgl_supported = webgl_support()

let availableLayers = UIEventSource.FromPromise(getAvailableLayers())
const state = new WithSearchState(theme, availableLayers)

</script>

{#if !webgl_supported}
  <div class="alert w-full h-full justify-center items-center m-8">WebGL is not supported or not enabled. This is
    essential
    for MapComplete to function, please enable this.
  </div>
{:else}
  <ThemeViewGUI {state} />
{/if}
