import { setState } from '../state/store.js';
const defaultNav = [
    { id: 'overview', label: 'Uebersicht', icon: '[*]' },
    { id: 'tickets', label: 'Ticketsystem', icon: '[*]' },
    { id: 'modules', label: 'Module', icon: '[*]' },
    { id: 'settings', label: 'Einstellungen', icon: '[*]' },
    { id: 'events', label: 'Events', icon: '[*]' },
    { id: 'admin', label: 'Admin', icon: '[*]', requiresAdmin: true }
];
export function renderSidebar(container, isAdmin) {
    container.innerHTML = '';
    const brand = document.createElement('div');
    brand.className = 'brand';
    brand.textContent = 'Papo Control';
    const nav = document.createElement('div');
    nav.className = 'nav';
    defaultNav.forEach((item) => {
        if (item.requiresAdmin && !isAdmin)
            return;
        const a = document.createElement('a');
        a.href = `#${item.id}`;
        a.dataset.target = item.id;
        a.innerHTML = `<span class="icon">${item.icon || ''}</span>${item.label}`;
        nav.appendChild(a);
    });
    container.appendChild(brand);
    container.appendChild(nav);
}
export function initNavigation(onChange) {
    const navLinks = Array.from(document.querySelectorAll('.nav a'));
    const activate = (section) => {
        navLinks.forEach((link) => link.classList.toggle('active', link.dataset.target === section));
        document.querySelectorAll('.section').forEach((sec) => {
            sec.classList.toggle('active', sec.id === `section-${section}`);
        });
        setState({}); // trigger listeners for potential observers
        onChange(section);
    };
    navLinks.forEach((link) => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const target = link.dataset.target || 'overview';
            history.replaceState(null, '', `#${target}`);
            activate(target);
        });
    });
    const initial = (location.hash || '#overview').replace('#', '');
    activate(initial);
    window.addEventListener('hashchange', () => {
        const section = (location.hash || '#overview').replace('#', '');
        activate(section);
    });
}