<script lang="ts">
import { useRoute } from 'vue-router'

export default { 
  async setup() {
    const route = useRoute()
    const game = route.params.game
    const res = await fetch(`http://localhost:7000/api/discover/${game}`)

    return {
      data: await res.json()
    }
  },

  methods: {
    abbreviate(text: number) {
        return Intl.NumberFormat('en-US', {
            //@ts-ignore
            notation: "compact",
            maximumFractionDigits: 1
        }).format(text)
    }
  }
}
</script>

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

        <div>
            <h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
            <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>

            <p class="text-md text-gray-400 overflow-y-auto">{{ data.description }}</p>
        </div>

    </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">
                <div class="bg-ctp-crust rounded-lg">
                    <a :href="`http://localhost:5173/${stream.streamer.name}`">
                        <img :src="stream.preview" class="rounded-lg rounded-b-none">
                    </a>

                    <div class="text-white p-2 inline-flex space-x-2 w-full">
                        
                        
                        <div class="inline-flex w-full">
                            <div class="inline-flex">
                                <img :src="stream.streamer.pfp" class="rounded-full mr-2">
                                <div>
                                    <p class="font-bold w-[22.9rem] truncate">{{ stream.title }}</p>
                                    <div class="inline-flex w-full justify-between">
                                        <p class="text-gray-300">{{ stream.streamer.name }}</p>
                                        <p class="self-end float-right"> <v-icon name="io-person"></v-icon> {{ abbreviate(stream.viewers) }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

  </div>
</template>
