import {useEvent} from "../../core";
import {removeModules} from "../../core/removeModules";

let keydownHandler = null;
let clickHandler = null;

export function init() {
    const el = document.getElementById("sidebar-menu");
    const button = document.getElementById('menu-toggle');
    const aside = document.getElementById('sidebar');
    const backdrop = document.querySelector('.backdrop');

    const footer = document.querySelector('footer');
    const headerLink = document.querySelector('header a');

    // Check if required elements exist
    if (!button || !aside || !backdrop) {
        console.info('[Sidebar] Required elements not found, skipping sidebar initialization');
        return;
    }

    useEvent(button, 'click', (e) => {
        aside.classList.toggle('show');
        //aside.toggleAttribute('inert')

        let isVisible = aside.classList.contains('show');

        if (isVisible) {
            backdrop.classList.add('visible');

            if (footer) footer.setAttribute('inert', 'true');
            if (headerLink) headerLink.setAttribute('inert', 'true');
        } else {
            backdrop.classList.remove('visible');

            if (footer) footer.removeAttribute('inert');
            if (headerLink) headerLink.removeAttribute('inert');
        }
    })

    keydownHandler = (e) => {
        if(e.key === 'Escape'){
            if(aside.classList.contains('show')){
                aside.classList.remove('show');
                backdrop.classList.remove('visible');
            }
        }
    }

    useEvent(document, 'keydown', keydownHandler)

    clickHandler = (e) => {
        aside.classList.remove('show');
        backdrop.classList.remove('visible');

        if (footer) footer.removeAttribute('inert');
        if (headerLink) headerLink.removeAttribute('inert');
    }

    useEvent(backdrop, 'click' , clickHandler)
}

export function destroy() {
    /*document.removeEventListener('keydown', keydownHandler);
    document.removeEventListener('click', clickHandler);*/
    removeModules('sidebar');
}