<template>
    <aside
        :class="[
            'fixed top-16 left-0 w-60 bg-gray-600 text-white transform transition-transform duration-300 ease-in-out z-40 h-full',
            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
        ]"
        role="navigation"
        aria-label="Menu principal">
        <nav class="h-full overflow-y-auto">
            <ul class="h-full flex flex-col">
                <li v-for="(item, index) in menuItems" :key="index" class="mb-2">
                    <template v-if="item.id">
                        <MenuGroup
                            :id="item.id"
                            :icon="item.icon"
                            :text="item.text"
                            :sub-items="item.subItems"
                            :is-active="isActive(item)"
                            :to="item.to" />
                    </template>
                    <MenuItem
                        v-else
                        :icon="item.icon"
                        :text="item.text"
                        :to="item.to"
                        :is-active="isActiveRoute(item.to)"
                        :badge="item.badge" />
                </li>
            </ul>
        </nav>
    </aside>
</template>

<script setup>
    import { useRoute } from 'vue-router';
    import {
        BookOpenIcon,
        PlusIcon,
        ArrowDownTrayIcon,
        GlobeAltIcon,
        ArrowsRightLeftIcon,
        CalendarIcon,
        ClockIcon,
        Cog6ToothIcon,
        ComputerDesktopIcon
    } from '@heroicons/vue/24/outline';
    import MenuItem from './sidebar/MenuItem.vue';
    import MenuGroup from './sidebar/MenuGroup.vue';

    const route = useRoute();
    const props = defineProps({
        isOpen: {
            type: Boolean,
            required: true
        }
    });

    const isActiveRoute = path => {
        return route.path === path;
    };

    const isActive = item => {
        if (!item.to) {
            return item.subItems?.some(subItem => route.path === subItem.to) || false;
        }

        if (item.to === '/') {
            return route.path === '/' || ['/add', '/import', '/discover'].includes(route.path);
        }

        return route.path.startsWith(item.to);
    };

    const menuItems = [
        {
            icon: BookOpenIcon,
            text: 'Mangas',
            to: '/',
            id: 'mangas',
            subItems: [
                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/add' },
                {
                    icon: ArrowDownTrayIcon,
                    text: 'Import bibliothèque',
                    to: '/import'
                },
                { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' }
            ]
        },
        {
            icon: ArrowsRightLeftIcon,
            text: 'Convertir CBR en CBZ',
            to: '/convert'
        },
        {
            icon: CalendarIcon,
            text: 'Calendrier',
            to: '/calendar'
        },
        {
            icon: ClockIcon,
            text: 'Activité',
            to: '/activity',
            badge: '3'
        },
        {
            icon: Cog6ToothIcon,
            text: 'Paramètres',
            to: '/settings',
            id: 'settings',
            subItems: [
                { icon: null, text: 'Général', to: '/settings/general' },
                { icon: null, text: 'Dossiers', to: '/settings/folders' },
                { icon: null, text: 'Scrappers', to: '/settings/scrappers' },
                { icon: null, text: 'UI', to: '/settings/ui' }
            ]
        },
        {
            icon: ComputerDesktopIcon,
            text: 'Système',
            to: '/system',
            id: 'system',
            subItems: [
                { icon: null, text: 'Status', to: '/system/status' },
                { icon: null, text: 'Backup', to: '/system/backup' },
                { icon: null, text: 'Logs', to: '/system/logs' },
                { icon: null, text: 'Updates', to: '/system/updates' }
            ]
        }
    ];
</script>
