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

export default {
    inject: ['protocol'],
    setup() {
        let data: Ref<any> = ref(null)
        return {
            data,
        }
    },
    async mounted() {
        try {
            const res = await fetch(`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/search/?query=${this.$route.query.query}`)
            const rawData = await res.json()

            this.data = rawData.data
            this.data.query = this.$route.query.query
        } catch (e) {
            this.data = { status: 'error' }
        }

    },
    methods: {
        getStream(channel: any) {
            return {
                ...channel.stream,
                streamer: {
                    name: channel.username,
                    pfp: channel.pfp
                }
            }
        }
    },
    components: {
        CategoryPreview,
        ErrorMessage,
        LoadingScreen,
        StreamPreviewVue,
        ChannelPreview
    }
}
</script>
<template>
    <loading-screen v-if="!data"></loading-screen>
    <error-message v-else-if="data.status === 'error' || !data"></error-message>


    <div v-else class="p-3 space-y-5">
        <div v-if="data.channels.length > 0">
            <h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ data.query }}"</h1>
            <ul class="flex overflow-x-scroll overflow-y-hidden">
                <li v-for="channel in data.channels" :key="channel" class="m-2 hover:scale-105 transition-transform">
                    <channel-preview :channel="channel"></channel-preview>
                </li>
            </ul>
        </div>

        <div v-if="data.categories.length > 0">
            <h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ data.query }}"</h1>
            <ul class="flex max-w-[100vw] max-h-[27rem] overflow-x-scroll overflow-y-hidden">
                <li v-for="category in data.categories" :key="category" class="m-2 hover:scale-105 transition-transform">
                    <category-preview :category-data="category"></category-preview>
                </li>
            </ul>
        </div>

        <div v-if="data.relatedChannels.length > 0">
            <h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ data.query }}"</h1>
            <ul class="flex overflow-x-scroll space-x-5 ">
                <li v-for="channel in data.relatedChannels" :key="channel">
                    <stream-preview-vue :stream="getStream(channel)"></stream-preview-vue>
                </li>
            </ul>
        </div>


        <div v-if="data.channelsWithTag.length > 0">
            <h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ data.query }}"</h1>
            <ul class="inline-flex overflow-y-hidden overflow-x-scroll max-w-[100vw] space-x-5">
                <li v-for="channel in data.channelsWithTag" :key="channel">
                    <channel-preview :channel="channel"></channel-preview>
                </li>
            </ul>
        </div>


    </div>
</template>