// slide menu
const slidemenu = {
    init: function () {
        this.action();
    },
    action: function () {
        const hd = document.querySelector('#header');
        const btn = document.querySelector('#slide-btn button');
        const gnb = document.querySelector('.gnb_wrap');
        const drdw = document.getElementById('drdw');
        const slide = document.getElementById('slide-menu');
        const bg = document.getElementById('slide-bg');
        const closeBtns = document.querySelectorAll('#slide-close, #slide-bg, #drdw .close');
        const schform = document.getElementById('hd-sch-mo');
        //hover
        if (gnb) {
            const gnbWrap = document.querySelector('#gnb, #drdw');
            // down
            gnbWrap.addEventListener('mouseover', function(e){
                if (e.relatedTarget && gnbWrap.contains(e.relatedTarget)) return;
                if(btn.classList.contains('on')) return;
                // console.log('down');
                btn.click();
            });
            // up
            drdw.addEventListener('mouseout', function(e){
                if (e.relatedTarget && drdw.contains(e.relatedTarget)) return;
                if(!btn.classList.contains('on')) return;
                // console.log('up');
                btn.click();
            });
        }
        // 버튼 클릭
        if (btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                const isPC = getdevice() === 'pc';
                if (isPC) {
                    const isOn = btn.classList.contains('on');
                    if (!isOn) {
                        slideDown(drdw, 200);
                        btn.classList.add('on');
                        hd.classList.add('on');
                        document.getElementById('hd-sch')?.classList.remove('on');
                    } else {
                        slideUp(drdw, 200);
                        btn.classList.remove('on');
                        hd.classList.remove('on');
                        schform?.classList.remove('on');
                    }
                } else {
                    const isOn = slide.classList.contains('on');
                    if (!isOn) {
                        bg.classList.add('on');
                        slide.classList.add('on');
                    }
                }
            });
        }
        // 닫기 버튼들
        closeBtns.forEach(closeBtn => {
            closeBtn.addEventListener('click', function (e) {
                e.preventDefault();
                if (drdw && drdw.style.display !== 'none' && getdevice() === 'pc') {
                    btn.click();
                    const focusEl = document.querySelector('[data-tab-index="' + window.NOW_TABINDEX + '"]');
                    if (focusEl) focusEl.focus();
                }
                if (slide.classList.contains('on')) {
                    bg.classList.remove('on');
                    slide.classList.remove('on');
                    schform?.classList.remove('on');
                }
            });
        });
        // 바깥 클릭 시 닫기
        document.body.addEventListener('click', function (e) {
            const isInDrdw = drdw.contains(e.target);
            const isInBtn = document.getElementById('slide-btn')?.contains(e.target);
            if (!isInDrdw && !isInBtn && drdw.style.display !== 'none') {
                slideUp(drdw, 200);
                btn.classList.remove('on');
                hd.classList.remove('on');
                schform?.classList.remove('on');
            }
        });
        // resize/load 시 메뉴 닫기
        ['resize', 'load'].forEach(evt => {
            window.addEventListener(evt, function () {
                slideUp(drdw, 0); // 바로 닫힘
                btn.classList.remove('on');
                hd.classList.remove('on');
            });
        });
    }
};
document.addEventListener('DOMContentLoaded', function () {
    if (document.getElementById('slide-menu')) {
        slidemenu.init();
    }
});