<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { useRoute, RouterLink, useRouter } from 'vue-router'
import {
    Dialog,
    DialogPanel,
    TransitionChild,
    TransitionRoot,
} from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline'
import { useMenuStore } from '@/stores/menu'
import { IconApp } from '@/utils/icons'
import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
import { splitRoutePath } from '@/utils/texts'

const menu = useMenuStore()
const route = useRoute()
const router = useRouter()

watch(route, (to, _) => {
    menu.menuSelected = to.fullPath
    closeSideBar()
})

// onMounted(() => {
//     menu.menuSelected = router.currentRoute.value.fullPath

//     if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
//         const result = splitRoutePath(menu.menuSelected)

//         for (const route of result) {
//             if (route !== '/home') {
//                 menu.toggleSidebarMenu(route, true)
//             }
//         }
//     }
// })

const isMenu = (name: string) => {
    return menu.menuSelected === name
}

const closeSideBar = () => menu.toggleSidebar()

</script>

<template>
    <TransitionRoot as="template" :show="menu.sidebarOpen">
        <Dialog as="div" class="relative z-40 md:hidden" @close="closeSideBar">
            <TransitionChild as="template" enter="transition-opacity ease-linear duration-300" enter-from="opacity-0"
                enter-to="opacity-100" leave="transition-opacity ease-linear duration-300" leave-from="opacity-100"
                leave-to="opacity-0">
                <div class="fixed inset-0 bg-gray-600 bg-opacity-75" />
            </TransitionChild>

            <div class="fixed inset-0 z-40 flex">
                <TransitionChild as="template" enter="transition ease-in-out duration-300 transform"
                    enter-from="-translate-x-full" enter-to="translate-x-0"
                    leave="transition ease-in-out duration-300 transform" leave-from="translate-x-0"
                    leave-to="-translate-x-full">
                    <DialogPanel class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4 bg-primary-50">
                        <TransitionChild as="template" enter="ease-in-out duration-300" enter-from="opacity-0"
                            enter-to="opacity-100" leave="ease-in-out duration-300" leave-from="opacity-100"
                            leave-to="opacity-0">
                            <div class="absolute top-0 right-0 pt-2 -mr-12">
                                <button type="button"
                                    class="flex items-center justify-center w-10 h-10 ml-1 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                                    @click="closeSideBar">
                                    <span class="sr-only">Close sidebar</span>
                                    <XMarkIcon class="w-6 h-6 text-white" aria-hidden="true" />
                                </button>
                            </div>
                        </TransitionChild>
                        <div class="flex items-center flex-shrink-0 px-4">
                            <RouterLink to="/">
                                <img class="w-auto h-16" :src="IconApp" alt="PLN" />
                            </RouterLink>
                        </div>
                        <div class="flex-1 h-0 mt-5 overflow-y-auto">
                            <nav class="px-2 space-y-1">
                                <template v-for="item in menu.navigation" :key="item.name">
                                    <!-- Single-level item -->
                                    <AsideMenuSingle v-if="item.children.length === 0" :item="item"
                                        :selected="isMenu(item.path)" />

                                    <!-- Nested item with children -->
                                    <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
                                </template>
                            </nav>
                        </div>
                    </DialogPanel>
                </TransitionChild>
                <div class="flex-shrink-0 w-14" aria-hidden="true">
                    <!-- Dummy element to force sidebar to shrink to fit close icon -->
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
    <!-- Static sidebar for desktop -->
    <div class="z-10 hidden md:fixed md:inset-y-0 md:flex md:w-80 md:flex-col">
        <!-- Sidebar component, swap this element with another sidebar if you like -->
        <div class="flex flex-row items-center flex-shrink-0 h-16 px-2 bg-primary-50">
            <button type="button"
                class="px-4 py-4 text-gray-500 rounded-full hover:bg-primary-100 focus:outline-none focus:ring-0"
                @click="menu.toggleSidebarDesktop()">
                <span class="sr-only">Open sidebar</span>
                <!-- <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" /> -->
                <svg class="w-6 h-6" width="32" height="32" viewBox="0 0 32 32" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z"
                        fill="#343330" />
                </svg>

            </button>
            <RouterLink to="/">
                <img class="w-auto h-11" :src="IconApp" alt="PLN" />
            </RouterLink>
        </div>
        <span v-if="menu.sidebarShowed" class="px-4 mt-4 text-sm font-semibold text-primary-800">
            Menu
        </span>
        <div :class="[menu.sidebarShowed ? 'flex flex-col flex-grow overflow-y-auto' : 'hidden', '']">
            <div class="flex flex-col flex-grow mt-3">
                <nav class="flex-1 px-2 pb-4 space-y-1">
                    <template v-for="item in menu.navigation" :key="item.name">
                        <!-- Single-level item -->
                        <AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.path)" />

                        <!-- Nested item with children -->
                        <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
                    </template>
                </nav>
            </div>
        </div>
    </div>
</template>

@/utils/text@/utils/texts