# vue/app/shared/MultiLevelMenu/index.coffee
document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss" component="MultiLevelMenu">'+stylFns['app/shared/MultiLevelMenu/index.styl']+'</style>')

module.exports =
    name: 'MultiLevelMenu'
    render: (new Function '_ctx', '_cache', renderFns['app/shared/MultiLevelMenu/index.pug'])()
    data: ->
        openSubmenu: null
        openSubsubmenu: null
        isMobileMenuOpen: false
        openMobileSubmenu: null
        openMobileSubsubmenu: null
        menuItems: [
            {
                id: 1
                title: 'Мероприятия'
                children: [
                    {
                        id: 11
                        title: 'Концерты'
                        children: [
                            { id: 111, title: 'Классическая музыка', path: '/events?category=classical' }
                            { id: 112, title: 'Фольклорные концерты', path: '/events?category=folk' }
                            { id: 113, title: 'Джазовые вечера', path: '/events?category=jazz' }
                            { id: 114, title: 'Поп-музыка', path: '/events?category=pop' }
                        ]
                    }
                    {
                        id: 12
                        title: 'Фестивали'
                        children: [
                            { id: 121, title: 'Музыкальные фестивали', path: '/events?type=festival' }
                            { id: 122, title: 'Международные события', path: '/events?type=international' }
                        ]
                    }
                    { id: 13, title: 'Все мероприятия', path: '/events' }
                ]
            }
            {
                id: 2
                title: 'О зале'
                children: [
                    { id: 21, title: 'История', path: '/about#history' }
                    { id: 22, title: 'Архитектура', path: '/about#architecture' }
                    { id: 23, title: 'Акустика', path: '/about#acoustics' }
                    { id: 24, title: 'Галерея', path: '/about#gallery' }
                ]
            }
            {
                id: 3
                title: 'Посетителям'
                children: [
                    { id: 31, title: 'Как добраться', path: '/contacts#location' }
                    { id: 32, title: 'Правила посещения', path: '/contacts#rules' }
                    { id: 33, title: 'Доступная среда', path: '/contacts#accessibility' }
                    { id: 34, title: 'Архив мероприятий', path: '/archive' }
                ]
            }
            { id: 4, title: 'Контакты', path: '/contacts' }
        ]
    mounted: ->
        debug.log "MultiLevelMenu component mounted"
        @setupEventListeners()
    beforeUnmount: ->
        @removeEventListeners()
    methods:
        getMenuItemClasses: (item) ->
            baseClasses = 'text-gray-700 dark:text-gray-300 hover:text-accent dark:hover:text-accent'
            activeClasses = if @openSubmenu == item.id then 'bg-accent bg-opacity-10 text-accent' else 'hover:bg-gray-100 dark:hover:bg-gray-700'
            return baseClasses + ' ' + activeClasses
        
        handleMenuClick: (menuItem) ->
            if menuItem.path
                @closeAllMenus()
                @$router.push(menuItem.path)
            else
                debug.log "Menu item clicked: " + menuItem.title
        
        handleMobileMenuClick: (menuItem) ->
            if menuItem.path
                @closeMobileMenu()
                @$router.push(menuItem.path)
            else
                debug.log "Mobile menu item clicked: " + menuItem.title
        
        toggleMobileMenu: ->
            @isMobileMenuOpen = !@isMobileMenuOpen
            if @isMobileMenuOpen
                document.body.style.overflow = 'hidden'
            else
                document.body.style.overflow = ''
        
        closeMobileMenu: ->
            @isMobileMenuOpen = false
            @openMobileSubmenu = null
            @openMobileSubsubmenu = null
            document.body.style.overflow = ''
        
        toggleMobileSubmenu: (item) ->
            if @openMobileSubmenu == item.id
                @openMobileSubmenu = null
            else
                @openMobileSubmenu = item.id
                @openMobileSubsubmenu = null
        
        toggleMobileSubsubmenu: (child) ->
            if @openMobileSubsubmenu == child.id
                @openMobileSubsubmenu = null
            else
                @openMobileSubsubmenu = child.id
        
        closeAllMenus: ->
            @openSubmenu = null
            @openSubsubmenu = null
        
        setupEventListeners: ->
            document.addEventListener 'keydown', @handleKeydown
        
        removeEventListeners: ->
            document.removeEventListener 'keydown', @handleKeydown
        
        handleKeydown: (event) ->
            if event.key == 'Escape' and @isMobileMenuOpen
                @closeMobileMenu()