<script lang="ts">
import { ref, type Ref } from 'vue'
import StreamPreviewVue from '@/components/StreamPreview.vue'
import ErrorMessage from '@/components/ErrorMessage.vue'
import LoadingScreen from '@/components/LoadingScreen.vue'

export default {
  async setup() {
    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
    const data: Ref<any | undefined> = ref()
    const frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN

    return {
      data,
      frontend_url
    }
  },
  async mounted() {
    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
    const game: string = this.$route.params.game.toString()

    try {
      const res = await fetch(
        `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
      )
      const rawData = await res.json()
      if (rawData.status === 'ok') {
        this.data = rawData.data
      } else {
        this.data = { status: 'error' }
      }
    } catch (err) {
      this.data = { status: 'error' }
      console.error(err)
    }
  },
  methods: {
    abbreviate(text: number) {
      return Intl.NumberFormat('en-US', {
        //@ts-ignore
        notation: 'compact',
        maximumFractionDigits: 1
      }).format(text)
    }
  },
  components: {
    StreamPreviewVue,
    ErrorMessage,
    LoadingScreen
  }
}
</script>

<template>
  <loading-screen v-if="!data"></loading-screen>
  <error-message v-else-if="data.status === 'error' || !data"></error-message>

  <div v-else class="flex flex-col max-w-5xl mx-auto">
    <div class="flex p-3 flex-col">
      <div class="inline-flex space-x-4">
        <img :src="data.cover" class="self-start rounded-md" />

        <div>
          <h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
          <div class="hidden md:block">
            <div>
              <div class="inline-flex my-1 space-x-3">
                <p class="font-bold text-white text-lg">
                  Followers: {{ abbreviate(data.followers) }}
                </p>
                <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
              </div>

              <ul class="mb-5">
                <li v-for="tag in data.tags" :key="tag" class="inline-flex">
                  <span
                    class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
                    >{{ tag }}</span
                  >
                </li>
              </ul>
            </div>
          </div>
          <p class="text-md text-gray-400 overflow-y-auto hidden md:block">
            {{ data.description }}
          </p>
        </div>
      </div>

      <div class="md:hidden">
        <div>
          <div class="inline-flex my-1 space-x-3">
            <p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
            <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
          </div>

          <ul class="mb-5">
            <li v-for="tag in data.tags" :key="tag" class="inline-flex">
              <span
                class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
                >{{ tag }}</span
              >
            </li>
          </ul>
        </div>
      </div>
      <p class="text-md text-gray-400 overflow-y-auto md:hidden">{{ data.description }}</p>
    </div>

    <div class="max-w-[58rem] mx-auto">
      <ul>
        <li
          v-for="stream in data.streams"
          :key="stream"
          class="inline-flex m-2 hover:scale-105 transition-transform"
        >
          <StreamPreviewVue :stream="stream"></StreamPreviewVue>
        </li>
      </ul>
    </div>
  </div>
</template>
