const pageHash = location.hash;
let subVisualHeading, subVisualTab;


window.addEventListener('DOMContentLoaded', () => {
    if (pageHash) {
        const string = pageHash.replace('#', '');
        const offset = header.height + 100;

        setTimeout(() => {
            window.scrollTo(0, window.scrollY + document.getElementById(string).getBoundingClientRect().top - offset);

        }, 100);
    }
    
    subVisual();
	subContainer();
    pageSearch();
    mobileScroll();
});

function mobileScroll() {
    const mobileScroll = new Swiper('.mobile-scroll', {
        simulateTouch: false,
        freeMode: true,
        slidesPerView: 'auto',
        scrollbar: {
            el: '.mobile-scroll .swiper-scrollbar',
            draggable: true,
        }
    });
}

// function subVisual() {
//     subVisualHeading = document.querySelector('.sub-visual .heading');
//     subVisualTab = document.querySelector('.sub-visual-tab');

//     ScrollReveal().reveal(subVisualHeading, { ...fadeUp });
//     ScrollReveal().reveal('.sub-visual .background', { ...fadeIn });
//     ScrollReveal().reveal('.section-navigation', { ...fadeLeft });
//     ScrollReveal().reveal('.section-container', { ...fadeUp });

//     window.addEventListener('scroll', onScroll);
// }

function pageSearch() {
    const container = document.querySelector('.page-search-container');
    
    if (!container) {
        return;
    }
    
    const toggle = container.querySelector('.button-toggle');

    toggle.addEventListener('click', toggleMenu);

    function toggleMenu(){
        if (this.getAttribute('aria-expanded') === 'false') {
            container.dataset.pageSearch = 'opened';
            this.setAttribute('aria-expanded', 'true');
            this.setAttribute('aria-label', '메뉴 닫기');
            this.textContent ='닫기';
            setTimeout(() => { input.focus() }, 100);
        } else {
            container.removeAttribute('data-page-search');
            this.setAttribute('aria-expanded', 'false');
            this.setAttribute('aria-label', '메뉴 열기');
            this.textContent ='페이지 내 검색';
            markInstance.unmark();
            input.value = '';
        }
    }

    const contents = document.querySelector('.section-container');
    const current = container.querySelector('.current-num');
    const total = container.querySelector('.total-num');
    const prev = container.querySelector('.prev');
    const next = container.querySelector('.next');
    let markInstance = new Mark(contents);
    let input = container.querySelector('.input');
    let results;
    let currentClass = 'current';
    let offset = header.height + 100;
    let currentIndex = 0;
    let variableCounter = 0;
    let totalCount = 0;

    prev.addEventListener("click", prevNextHandler);
    prev.addEventListener("click", prevCount);
    next.addEventListener("click", prevNextHandler);
    next.addEventListener("click", nextCount);
    input.addEventListener('keydown', keydown);
    input.addEventListener('input', function() {
        var keyword = input.value;

        markInstance.unmark({
            done: function(counter){
                markInstance.mark(keyword);
            }
        });

        markInstance.mark(keyword, {
            separateWordSearch: false,
            acrossElements: true,
            done: function(totalMatches) {
                results = contents.querySelectorAll("mark mark");
                totalCount = totalMatches;

                if (totalCount) {
                    results[0].classList.add('current');
                    window.scrollTo(0, window.scrollY + results[0].getBoundingClientRect().top - offset);
                    variableCounter = 1;
                    current.textContent = variableCounter;
                    total.textContent = totalCount;
                    prev.disabled = false;
                    next.disabled = false;
                } else {
                    variableCounter = 0;
                    current.textContent = variableCounter;
                    total.textContent = 0
                    prev.disabled = true;
                    next.disabled = true;
                }
            }
    
        });
    });

    function keydown(e) {
        const code = e.code;

        if(totalCount < 1){
            return
        }

        if(code == 'ShiftLeft' && code == 'Enter'){
            prev.click();
        }

        if(code == 'Enter'){
            next.click();
        }
    }

    function prevNextHandler() {
        if (results.length) {
            currentIndex += (this.classList.contains('prev') ? -1 : 1);
            if (currentIndex < 0) {
                currentIndex = results.length - 1;
            }
            if (currentIndex > results.length - 1) {
                currentIndex = 0;
            }
            jumpTo();
        }
    }

    function nextCount() {
        if (variableCounter < totalCount) {
            variableCounter = variableCounter + 1;
        } else {
            variableCounter = 1;
        }
        current.textContent = variableCounter;
    }

    function prevCount() {
        if (variableCounter > 1) {
            variableCounter = variableCounter - 1;
        } else {
            variableCounter = totalCount;
        }
        current.textContent = variableCounter;
    }

    function jumpTo() {
        if (results.length) {
            let position;
            let current = results[currentIndex];

            results.forEach(result => result.classList.remove(currentClass));

            if (current) {
                current.classList.add(currentClass);
                position = window.scrollY + current.getBoundingClientRect().top - offset;
                window.scrollTo(0, position);
            }
        }
    }

}
    
function onScroll() {
    if (!subVisualHeading) {
        return;
    }
    lastScrollY > 275 ? gsap.to(subVisualHeading, 0.65, { color: '#fff' }) : gsap.to(subVisualHeading, 0.65, { color: '#000' });
}


function slideToSection(e) {
    const id = this.getAttribute('href');
    const section = document.querySelector(id);
    const position = window.scrollY + section.getBoundingClientRect().top;
    const gap = subVisualTab ? subVisualTab.offsetHeight + 30 : 30;
    let top = position - header.height - gap;

    window.scrollTo({ top: top, left: 0, behavior: 'smooth' });

    console.log('aa');

    e.preventDefault();
}

function subContainer(){
    const tabs = document.querySelectorAll('.section-navigation a');
    const listEl = document.querySelector('.section-navigation .lists');

    if(tabs.length < 1){
        return;
    }

    window.addEventListener('resize', onResize);

    setListHeight();
    
    tabs[0].setAttribute('aria-selected', 'true');

    tabs.forEach((tab, i) => {
        
        if (tab.getAttribute('href').slice(0, 1) !== '#') {
            return;
        }

        let element = document.querySelector(tab.getAttribute("href"));

		ScrollTrigger.create({
			trigger: element,
			start: "top center",
			end: "bottom center",
			onToggle: self => self.isActive && setActive(tab, i)
        });
        
        tab.addEventListener('click', slideToSection);
	});

    function setActive(link, i) {
		tabs.forEach(el => el.removeAttribute('aria-selected'));
        link.setAttribute('aria-selected', 'true');

        const ul = link.closest('.depth2');

        if (ul) {
            const depth2 = ul.previousElementSibling;
            depth2.setAttribute('aria-selected', 'true');
        }

        const ul2 = link.closest('.depth3');

        if (ul2) {
            const depth3 = ul2.previousElementSibling;
            depth3.setAttribute('aria-selected', 'true');
        }
    }
    
    function setListHeight() {
        const tabHeight = subVisualTab ? subVisualTab.offsetHeight : 0;
        const gap = 80;
        const height = window.innerHeight - header.height - tabHeight - gap;

        listEl.style.maxHeight = height + 'px';
    }

    function onResize() {
        setListHeight();
    }
}