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

const mobileMenu = () => {
    const icon = document.querySelector('.icon-menu');
    const menu = document.querySelector('.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 album = () => {
    const album = document.querySelector('#album');

    if (album) {
        const photos = album.querySelectorAll('.photo');
        const openImageContainer = document.querySelector('#open-image');
        const close = openImageContainer.querySelector('.close');

        photos.forEach((photo) => {
            photo.addEventListener('click', (event) => {
                const dataset = photo.dataset;
                openImageContainer.querySelector('#image').setAttribute('src', dataset.url);
                openImageContainer.querySelector('#image').setAttribute('alt', dataset.alt);
                openImageContainer.querySelector('#caption').innerHTML = dataset.caption;
                openImageContainer.querySelector('#date').innerHTML = `Date Taken: ${dataset.date}`;
                openImageContainer.querySelector('#location').innerHTML = `Location: ${dataset.location}`;
                openImageContainer.querySelector('#equipment').innerHTML = `Camera Used: ${dataset.equipment}`;
                openImageContainer.classList.toggle('open');
                document.querySelector('body').classList.toggle('photo-open');
            });
        });

        close.addEventListener('click', (event) => {
            if (openImageContainer.classList.contains('open')) {
                openImageContainer.classList.remove('open');
                document.querySelector('body').classList.remove('photo-open');
            }
        })
    }

    
}

mobileMenu();
album();