<script>
import { defineComponent } from 'vue'
import SearchIcon from '@/components/icons/Search.vue'
import Sidebar from '@/components/Sidebar.vue'
import { config } from '@/main.js'
import axios from 'axios'
import VideoSearchResult from '@/components/VideoSearchResult.vue'

export default defineComponent({
    name: 'SearchView',
    components: { VideoSearchResult, Sidebar, SearchIcon },
    methods: {
        async search(searchQuery = null) {
            let searchBar;
            if(searchQuery == null) { searchBar = document.getElementById('search-bar') }
            else { searchBar = { value: searchQuery } }
            const searchStatus = document.getElementById('search-status');

            console.log(searchBar.value);
            if (searchBar.value.trim() === '') return (searchStatus.innerText = `no`)
            searchStatus.innerText = 'searching!!'
            const response = await axios.post(`${config.serverURL}/video/search`, {
                query: searchBar.value,
            })

            if (response.data.error)
                return (searchStatus.innerText = `search error: ${response.data.error}`)
            if (response.data.length === 0) return (searchStatus.innerText = 'no results :(')

            this.searchResults = response.data
            searchStatus.innerText = '';
        },
    },
    data() {
        return {
            searchResults: null,
        }
    },
	mounted () {
		const searchParams = new URLSearchParams(window.location.search);
		if(searchParams.get('searchQuery')) this.search(searchParams.get('searchQuery'));
	}
})
</script>

<template>
    <div class="main">
        <Sidebar />
        <div class="search-container">
            <div class="search-bar-container">
                <button class="search-button" @click="search()">
                    <SearchIcon :size="50" />
                </button>
                <input type="text" placeholder="Search" class="search-bar" id="search-bar" />
            </div>

            <div class="search-status" id="search-status"></div>
            <div class="search-results" id="search-results" v-for="video in searchResults">
                <VideoSearchResult
                    :id="video.id"
                    :title="video.title"
                    :author="video.author.username"
                    :likes="video.likes"
                    :dislikes="video.dislikes"
                    :comments="video.comments"
                    :shares="video.shares"
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: row;
}

.search-results {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.search-container {
    /* I have to do % instead of vw and vh for the proper sizing with the sidebar !! !! !! */
    width: 100%;
    height: 100%;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;

    justify-content: space-evenly;
    align-items: center;
}

.search-bar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background-color: var(--text-color);
    border-radius: 10px;

    width: calc(100% - 200px);
}

.search-bar {
    padding: 6px;
    font-size: 20px;
    background-color: var(--text-color);
    border: none;
    color: var(--inverted-text-color);
    font-family: "Knewave", system-ui;
    width: calc(100% - 100px);
}

.search-bar:focus {
    outline: none;
}

.search-button {
    background-color: transparent;
    border: none;
}

.search-button:hover {
    cursor: pointer;
    animation-name: interaction;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.search-status {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 70px;
    font-family: "Pinyon Script", cursive;
    color: var(--accent-color);
    text-shadow: 5px 5px 5px #fbff00;

    animation-name: interaction;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;

    pointer-events: none;
}

@keyframes interaction {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
</style>
