<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',
            !forceMobileBehavior ? '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">
                    <MenuGroup
                        :id="item.id"
                        :icon="item.icon"
                        :text="item.text"
                        :sub-items="item.subItems"
                        :to="item.to" />
                </li>
            </ul>
        </nav>
    </aside>
</template>

<script setup>
    import {
    ArrowDownTrayIcon,
    ArrowsRightLeftIcon,
    BookOpenIcon,
    ClockIcon,
    Cog6ToothIcon,
    ComputerDesktopIcon,
    GlobeAltIcon,
    PlusIcon
} from '@heroicons/vue/24/solid';
import MenuGroup from './sidebar/MenuGroup.vue';

    const props = defineProps({
        isOpen: {
            type: Boolean,
            required: true
        },
        forceMobileBehavior: {
            type: Boolean,
            default: false
        }
    });

    const menuItems = [
        {
            icon: BookOpenIcon,
            text: 'Mangas',
            to: '/manga',
            id: 'manga',
            subItems: [
                { icon: PlusIcon.render, text: 'Ajouter un nouveau', to: '/manga/add' },
                {
                    icon: ArrowDownTrayIcon,
                    text: 'Import bibliothèque',
                    to: '/import'
                },
                { icon: GlobeAltIcon, text: 'Découvrir', to: '/manga/discover' }
            ]
        },
        {
            icon: ArrowsRightLeftIcon,
            text: 'Convertir CBR en CBZ',
            to: '/convert',
            id: 'convert'
        },
        {
            icon: ClockIcon,
            text: 'Activité',
            to: '/activity',
            id: '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>
