<script setup lang="ts">

import kodikImage from "assets/img/kodik.png";
import shikimoriImage from "assets/img/shikimori.png";
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue
} from "~/components/ui/select";
import { toast } from "vue-sonner";
import { Toaster } from "~/components/ui/sonner";
import { Navbar } from "~/components/ui/navbar";
import 'vue-sonner/style.css'
import { Icon } from "#components";

const searchProvider = ref('kodik')
const displaySearchProvider = computed(() => {
    let label = '';
    let image;
    if (searchProvider.value === 'kodik') {
        label = 'Kodik';
        image = kodikImage;
    }
    if (searchProvider.value === 'shikimori') {
        label = 'Shikimori';
        image = shikimoriImage;
    }
    return {
        label,
        image
    }
})
const search = defineModel<string>("")
function querySearch() {
    if (!search.value || search.value.trim() === "") {
        toast('Please enter a value');
        return;
    }

}
</script>

<template>
    <div>
        <Toaster />
        <Navbar />
        <div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
            <Select v-model="searchProvider">
                <SelectTrigger>
                    <SelectValue placeholder="Select an provider">
                        <img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
                        <span>{{ displaySearchProvider.label }}</span>
                    </SelectValue>
                </SelectTrigger>
                <SelectContent>
                    <SelectGroup>
                        <SelectLabel>Providers</SelectLabel>
                        <SelectItem value="kodik">
                            <img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
                            <span>Kodik</span>
                        </SelectItem>
                        <SelectItem value="shikimori">
                            <img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
                            Shikimori
                        </SelectItem>
                    </SelectGroup>
                </SelectContent>
            </Select>
            <Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
            <Button @click="querySearch">
                <Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
            </Button>
        </div>
    </div>
</template>
