---
// BurgerMenu.astro
import { fetchMenu } from '@api/menu';

interface Props {
    colorMenuId: number;
    standardMenuId: number;
    submenuId: number;
}

const { colorMenuId, standardMenuId, submenuId } = Astro.props;

// Получаем все меню
const colorMenu = await fetchMenu({ id: colorMenuId });
const standardMenu = await fetchMenu({ id: standardMenuId });
const submenu = await fetchMenu({ id: submenuId });
---

<div class="burger-menu" id="burger-menu">
    <div class="burger-menu__overlay" id="burger-overlay"></div>
    <div class="burger-menu__wrapper">
        <button class="burger-menu__close" id="burger-close" aria-label="Close menu"></button>
        
        <div class="burger-menu__content">
            {colorMenu && (
                <div class="burger-menu__section">
                    <ul class="burger-menu__list">
                        {colorMenu.menuItems.nodes.map(item => {
                            const colorClass = item.menuItemColor ? `color-${item.menuItemColor}` : 'color-black';
                            return (
                                <li class="burger-menu__item" key={item.id}>
                                    <a 
                                        href={item.url} 
                                        class={`burger-menu__link burger-menu__link--colored ${colorClass}`}
                                        target={item.target || '_self'}
                                    >
                                        {item.label}
                                    </a>
                                </li>
                            );
                        })}
                        
                        <li class="burger-menu__item burger-menu__item--has-submenu">
                            <button 
                                class="burger-menu__link burger-menu__link--colored burger-menu__link--submenu color-black" 
                                id="submenu-trigger"
                                type="button"
                            >
                                Другие рубрики
                            </button>
                        </li>
                    </ul>
                </div>
            )}
            
            <div class="burger-menu__divider"></div>
            
            {standardMenu && (
                <div class="burger-menu__section">
                    <ul class="burger-menu__list">
                        {standardMenu.menuItems.nodes.map(item => (
                            <li class="burger-menu__item" key={item.id}>
                                <a 
                                    href={item.url} 
                                    class="burger-menu__link burger-menu__link--standard"
                                    target={item.target || '_self'}
                                >
                                    {item.label}
                                </a>
                            </li>
                        ))}
                    </ul>
                </div>
            )}
        </div>
    </div>
    
    <div class="burger-menu__submenu" id="submenu-panel">
        <button class="burger-menu__back" id="submenu-back" aria-label="Back to main menu"></button>
        
        <div class="burger-menu__submenu-content">
            {submenu && submenu.menuItems && submenu.menuItems.nodes ? (
                <ul class="burger-menu__list">
                    {submenu.menuItems.nodes.map(item => (
                        <li class="burger-menu__item" key={item.id}>
                            <a 
                                href={item.url} 
                                class="burger-menu__link"
                                target={item.target || '_self'}
                            >
                                {item.label}
                            </a>
                        </li>
                    ))}
                </ul>
            ) : (
                <p>Подменю не загружено</p>
            )}
        </div>
    </div>
</div>

<script>
    function initBurgerMenu() {
        const burger = document.querySelector('.primary-nav__burger');
        const menu = document.getElementById('burger-menu');
        const overlay = document.getElementById('burger-overlay');
        const closeBtn = document.getElementById('burger-close');
        const submenuTrigger = document.getElementById('submenu-trigger');
        const submenuPanel = document.getElementById('submenu-panel');
        const submenuBack = document.getElementById('submenu-back');
        
        if (!burger || !menu || !overlay || !closeBtn) return;
        
        const toggleMenu = () => {
            menu.classList.toggle('is-open');
            document.body.classList.toggle('burger-menu-open');
            // Закрываем подменю при закрытии основного меню
            if (!menu.classList.contains('is-open')) {
                submenuPanel?.classList.remove('is-open');
                submenuTrigger?.classList.remove('is-active');
            }
        };
        
        const toggleSubmenu = () => {
            submenuPanel?.classList.toggle('is-open');
            submenuTrigger?.classList.toggle('is-active');
        };
        
        const closeSubmenu = () => {
            submenuPanel?.classList.remove('is-open');
            submenuTrigger?.classList.remove('is-active');
        };
        
        burger.addEventListener('click', toggleMenu);
        overlay.addEventListener('click', toggleMenu);
        closeBtn.addEventListener('click', toggleMenu);
        
        // Управление подменю - toggle вместо открытия
        if (submenuTrigger && submenuPanel) {
            submenuTrigger.addEventListener('click', (e) => {
                e.preventDefault();
                toggleSubmenu();
            });
        }
        
        // Кнопка возврата
        if (submenuBack) {
            submenuBack.addEventListener('click', (e) => {
                e.preventDefault();
                closeSubmenu();
            });
        }
        
        // Закрытие по Escape
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (submenuPanel && submenuPanel.classList.contains('is-open')) {
                    closeSubmenu();
                } else if (menu.classList.contains('is-open')) {
                    toggleMenu();
                }
            }
        });
    }
    
    // Инициализация при загрузке
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initBurgerMenu);
    } else {
        initBurgerMenu();
    }
    
    // Реинициализация при навигации (если используете View Transitions)
    document.addEventListener('astro:after-swap', initBurgerMenu);
</script>

<style is:global>
    /* Классы цветов для border-left */
    .burger-menu__link--colored.color-black { border-left-color: #000000; }
    .burger-menu__link--colored.color-yellow { border-left-color: #ffc107; }
    .burger-menu__link--colored.color-blue { border-left-color: #2196f3; }
    .burger-menu__link--colored.color-green { border-left-color: #4caf50; }
    .burger-menu__link--colored.color-red { border-left-color: #f44336; }
    .burger-menu__link--colored.color-orange { border-left-color: #ff9800; }
    .burger-menu__link--colored.color-gray { border-left-color: #9e9e9e; }
    .burger-menu__link--colored.color-indigo { border-left-color: #3f51b5; }
    .burger-menu__link--colored.color-purple { border-left-color: #9c27b0; }
    .burger-menu__link--colored.color-pink { border-left-color: #e91e63; }
    .burger-menu__link--colored.color-teal { border-left-color: #009688; }
    .burger-menu__link--colored.color-cyan { border-left-color: #00bcd4; }
    .burger-menu__link--colored.color-white { border-left-color: #ffffff; }
    .burger-menu__link--colored.color-gray-dark { border-left-color: #424242; }
    .burger-menu__link--colored.color-light { border-left-color: #f5f5f5; }
    .burger-menu__link--colored.color-dark { border-left-color: #212121; }
</style>

<style>
    .burger-menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }
    
    .burger-menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }
    
    .burger-menu__overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
    }
    
    .burger-menu.is-open .burger-menu__overlay {
        opacity: 1;
        visibility: visible;
    }
    
    .burger-menu__wrapper {
        position: relative;
        height: 100%;
        background-color: #f8f8f8;
        z-index: 1001;
    }
    
    /* Крестик закрытия */
    .burger-menu__close {
        position: sticky;
        top: 1rem;
        left: auto;
        right: 1rem;
        margin-left: auto;
        display: block;
        width: 40px;
        height: 40px;
        border: none;
        background-color: #f8f8f8;
        cursor: pointer;
        color: #000000;
        transition: opacity 0.2s ease;
        z-index: 10;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px 24px;
    }
    
    .burger-menu__close:hover {
        opacity: 0.7;
    }
    
    .burger-menu__content {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: calc(100% - 56px);
    }
    
    .burger-menu__section {
        padding: 2rem 1.5rem;
    }
    
    .burger-menu__divider {
        height: 1px;
        background-color: #e0e0e0;
        margin: 0 1.5rem;
        flex-shrink: 0;
    }
    
    .burger-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .burger-menu__item {
        margin-bottom: 0;
        position: relative;
    }
    
    .burger-menu__item--has-submenu {
        position: static;
    }
    
    .burger-menu__link {
        display: block;
        padding: 0.75rem 0;
        text-decoration: none;
        color: #000000;
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        transition: background-color 0.2s ease, padding-left 0.2s ease;
        border: none;
        background: transparent;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }
    
    .burger-menu__link:hover {
        background-color: #ececec;
    }
    
    .burger-menu__link--colored {
        border-left: 3px solid #000000;
        padding-left: 1rem;
        transition: background-color 0.2s ease, border-left-width 0.2s ease, padding-left 0.2s ease;
    }
    
    .burger-menu__link--colored:hover {
        border-left-width: 6px;
        padding-left: calc(1rem - 3px);
    }
    
    .burger-menu__link--standard {
        padding-left: calc(1rem + 3px);
    }
    
    .burger-menu__link--submenu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Стрелка вправо (по умолчанию) */
    .burger-menu__link--submenu::after {
        content: '';
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-left: 0.5rem;
        background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px 16px;
        transition: transform 0.3s ease;
    }
    
    /* Стрелка влево (при открытом подменю) */
    .burger-menu__link--submenu.is-active::after {
        background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L6 8L10 4" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }
    
    /* Подменю */
    .burger-menu__submenu {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 320px;
        background-color: white;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1002;
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
        visibility: hidden;
    }
    
    .burger-menu__submenu.is-open {
        transform: translateX(0);
        visibility: visible;
    }
    
    /* Кнопка возврата */
    .burger-menu__back {
        position: sticky;
        top: 1rem;
        left: 1rem;
        width: 40px;
        height: 40px;
        border: none;
        background-color: white;
        cursor: pointer;
        color: #000000;
        transition: opacity 0.2s ease;
        z-index: 10;
        display: none;
        background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 18L9 12L15 6" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px 24px;
    }
    
    .burger-menu__back:hover {
        opacity: 0.7;
    }
    
    .burger-menu__submenu-content {
        height: 100%;
        overflow-y: auto;
        padding: 2rem 1.5rem;
    }
    
    /* Блокировка прокрутки body */
    :global(body.burger-menu-open) {
        overflow: hidden;
    }
    
    /* Десктоп */
    @media (min-width: 768px) {
        .burger-menu {
            width: 320px;
        }
        
        .burger-menu__overlay {
            display: none;
        }
        
        .burger-menu__wrapper {
            box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
        }
        
        .burger-menu__submenu {
            left: 320px;
        }
        
        .burger-menu__back {
            display: none !important;
        }
    }
    
    /* Мобильные */
    @media (max-width: 767px) {
        .burger-menu__submenu {
            width: 100%;
            left: 0;
        }
        
        .burger-menu__submenu.is-open .burger-menu__back {
            display: block;
        }
        
        .burger-menu__submenu-content {
            height: calc(100% - 56px);
        }
    }
</style>