<template>
    <div class="flex flex-col items-center justify-center px-4 text-center whitespace-pre-wrap h-screen-80">
        <div class="w-full md:w-[440px] py-4 md:py-0 flex flex-col items-center">
            <img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
            <button @click="command.showCommandPalettes" type="button"
                class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0">
                <span class="sr-only">Search</span>
                <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
                <span class="px-3 text-sm font-medium text-gray-500 text-md">Cari menu</span>
            </button>

            <div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
                <div class="flex flex-col items-start w-full p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
                    <h2 v-if="query === '' && recent.length > 0" class="mb-2 text-xs font-semibold text-gray-900 ">
                        Terakhir Dikunjungi
                    </h2>
                    <div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
                        :key="menu.path">
                        <div @click="openMenu(menu)" class="group">
                            <div
                                class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
                                <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon"
                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon"
                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]"
                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]"
                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]"
                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon"
                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon"
                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                <component v-else :is="navigationIcon[8]" alt="icon"
                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />

                                <div class="flex flex-col items-start flex-1 w-full pl-3 space-y-1">
                                    <span
                                        class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
                                        {{ menu.name }}
                                    </span>
                                    <span
                                        class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
                                        {{ menu.path.replace('/home/', '') }}
                                    </span>
                                </div>
                                <span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
                                    Buka
                                </span>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { readData, writeData } from '@/utils/storage'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
import { computed, onMounted, ref, watch } from 'vue'
import { useCommandPalattesStore } from '@/stores/command'
import { IconApp } from '@/utils/icons'
import { useRouter, type RouteRecordRaw } from 'vue-router'
import { routes, extractLeafRoutes } from '@/router'
import { navigationIcon } from '@/utils/route';

const command = useCommandPalattesStore()
const route = useRouter()
const recent = computed(() => query.value === '' ? command.readRecent() : [])
const query = ref('')

const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
    const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
    return matchingRoutes
}

const filteredMenus = computed(() =>
    query.value === ''
        ? []
        : searchRoutesByName(routes, query.value)
)
const onClose = () => command.open = false

let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
const onQueryChange = (value: string) => {
    if (debounceTimeout) {
        clearTimeout(debounceTimeout);
    }
    debounceTimeout = setTimeout(() => {
        // check if value is empty or only spaces
        if (value.trim() === '') {
            query.value = ''
            return
        }
        query.value = value
    }, 300);
}

const openMenu = (menu: RouteRecordRaw) => {
    command.addRecent(menu)
    route.push(menu.path)
    onClose()
}

</script>