<script setup>
import { FwbInput, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
import axios from 'axios';
import { debounce } from 'lodash';
import { SearchIcon } from '@/Utilities/Icons';
import { ref, watch } from 'vue';
import Dropdown from '@/Components/Dropdown.vue';
import DropdownLink from '@/Components/DropdownLink.vue';

const props = defineProps({
    css: String
});

const query = ref('');
const result = ref([]);

const searching = debounce((value) => {
    axios.get(
        route('search'),
        { 
            params: {
                query: value,
                limit: 5,
                tag: ''
            }
        }
    )
    .then(function(res) {
        result.value = res.data
        list.value = false;
        console.log(res);
    })
    .catch(function(error){
        console.log(error)
    })
    .finally(function(){

    });
}, 300);

watch(
    () => query.value,
    (val) => searching(val) 
);


</script>
<template>
    <Dropdown align="left" :contentClasses="['py-1 bg-white lg:w-60']">
        <template #trigger>
            <fwb-input
                v-model="query"
                placeholder="Iskalnik..."
                size="sm"
                class="lg:w-60"
            >
                <template #prefix>
                    <SearchIcon />
                </template>

            </fwb-input>
        </template>
        <template #content> 
            <div class="block px-4 py-2 text-xs text-gray-400">Naročnik</div>

            <DropdownLink v-for="client in result.clients" :href="route('client.show', {uuid: client.client_uuid})">{{ client.full_name }}</DropdownLink>
            <div class="border-t border-gray-200" />
            <div class="block px-4 py-2 text-xs text-gray-400">Cases</div>
            <DropdownLink v-for="clientcase in result.client_cases" :href="route('clientCase.show', {uuid: clientcase.case_uuid})">{{ clientcase.full_name }}</DropdownLink>
        </template>
    </Dropdown>
</template>