import './styles/landing.css';
import './stimulus_bootstrap.js';

const mobileMenu = () => {
    const icon = document.querySelector('.icon-menu');
    const menu = document.querySelector('.front-menu');
    const header = document.querySelector('header');
    const body = document.querySelector('body');


    icon.addEventListener('click', (event) => {
        icon.classList.toggle('open');
        menu.classList.toggle('open');
        header.classList.toggle('open');
        body.classList.toggle('menu-open');
    });
}

const jobInfoToggle = () => {
    const jobs = document.querySelectorAll('#work .jobs .job');
    
    jobs.forEach((job) => {
        job.addEventListener('click', (event) => {
            const jobId = job.dataset.jobId;
            const jobInfo = document.querySelector(`#${jobId}`);
            const activeJobLabel = document.querySelector('#work .jobs .job.active');
            
            if (jobInfo.classList.contains('hide')) {
                const openJob = document.querySelector('#work .jobs .job-highlight.show');

                if (jobInfo.classList.contains('hide')) {

                    jobInfo.classList.remove('hide');
                    jobInfo.classList.add('show');
                    openJob.classList.remove('show');
                    openJob.classList.add('hide');
                }
            }

            if (!job.classList.contains('active')) {
                job.classList.add('active');
                activeJobLabel.classList.remove('active');
            }
        });
    });
}

const scrollTo = () => {
    const links = document.querySelectorAll('#outro .menu a');
    
    links.forEach((link) => {
        link.addEventListener('click', (event) => {
            const anchor = link.dataset.scrollTo;
            const element = document.querySelector(`#${anchor}`).scrollIntoView();
            window.history.pushState({}, '', `#${anchor}`);
        })
    });
}

mobileMenu();
jobInfoToggle();
scrollTo();