import { I18N_LOADED_EVENT } from "../i18n/i18nLoadedEvent.js";
import { translator } from "../i18n/translator.js";

function getNavBar() {
    const nav = document.createElement('template');
    nav.id = 'navbar-template';
    nav.innerHTML = `
<style>
    a {
        color: inherit;
    }
    
    ul {
        list-style: none;
    }
    
    :host {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 1001;
    }
 
    .menu-toggle {
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
        
        margin-right: auto;
        padding: 0.5em;
    }

    .menu-toggle.hidden {
        display: none;
    }
    
    /* Collapsed menu */
    .bar {
        display: flex;
        position: relative;
        border-bottom: var(--line-thickness) solid var(--on-background-color);
        background-color: var(--background-color);
    }

    @media (prefers-reduced-motion: no-preference) {
        .bar {
            transform: translateY(0);
            transition: transform var(--animation-duration) ease;
            will-change: transform;
        }
    }

    .bar.hidden {
        transform: translateY(-100%);
    }

    /* Collapsable menu */
    .menu {
        display: none;

        position: absolute;
        height: 100vh;
        width: 100%;
        
        flex-direction: column;

        background-color: var(--background-color);

        text-transform: uppercase;
    }

    .menu.open {
        display: flex;
    }
</style>

<nav>
    <div class="bar">
        <button class="menu-toggle" aria-label="Open menu" data-i18n="nav.menu">[+] menu</button>
        <button class="menu-toggle hidden" aria-label="Close menu" data-i18n="nav.menu_close">[-] close</button>
        <language-dropdown></language-dropdown>
    </div>
    <div class="menu">
        <ul>
            <li><a href="/" data-i18n="nav.home">Home</a></li>
            <li><a href="/pages/cv.html">Curriculum Vitae</a></li>
            <li><a href="https://git.depeuter.dev/tdpeuter" data-i18n="nav.projects">Projects</a></li>
            <ul>
                <li><a href="/pages/homelab.html">Homelab</a></li>
            </ul>
            <li><a href="/pages/about_me.html" data-i18n="about_me.title">About</a></li>
        </ul>
    </div>
</nav>
    `;

    return nav;
}

class NavBar extends HTMLElement {
    constructor() {
        super();

        const templateContent = getNavBar().content;

        const shadowRoot = this.attachShadow({mode: 'open'});

        const navbar = templateContent.cloneNode(true);
        shadowRoot.appendChild(navbar);
    }

    toggleMenu(menu) {
        this.shadowRoot.querySelectorAll('.menu-toggle').forEach(button => button.classList.toggle('hidden'));

        menu.classList.toggle('open');
        document.body.classList.toggle('scroll-lock', menu.classList.contains('open'));
    }

    connectedCallback() {
        const shadow = this.shadowRoot;

        // Toggle menu
        const menuToggle = shadow.querySelector('.menu-toggle');
        const menu = shadow.querySelector('.menu');

        shadow.querySelectorAll('.menu-toggle').forEach(toggle => {
            toggle.addEventListener('click', () => this.toggleMenu(menu));
        });
        menu.addEventListener('click', () => {
            this.toggleMenu(menu);
        });

        // Hide on scroll-down, immediately show on scroll-up by toggling class
        let lastScrollY = window.scrollY;
        const navbar = shadow.querySelector('.bar');

        window.addEventListener('scroll', () => {
            if (!navbar) return;

            const currentScrollY = window.scrollY;
            if (currentScrollY > lastScrollY && currentScrollY > 100) {
                navbar.classList.add('hidden');
                console.debug('[navbar] Scrolling down - hide nav bar');
            } else {
                navbar.classList.remove('hidden');
                console.debug('[navbar] Scrolling up - show nav bar');
            }
            lastScrollY = currentScrollY;
            console.debug(`[navbar] Current scrollY: ${currentScrollY}`);
        })

        window.addEventListener(I18N_LOADED_EVENT, (event) => {
            console.log(`[navbar] i18nLoaded event received`);

            const translations = event.detail.translations;
            translator.translate(translations, shadow);
        });
    }
}

customElements.define('nav-bar', NavBar);
