const toggle = {
    element: document.querySelector('.nav-select-toggle'),
    circle: document.querySelector('.nav-toggle'),
};
const view = {
    grid: document.querySelector('.work-grid'),
    index: document.querySelector('.work-index'),
    indexItem: document.querySelectorAll('.work-index-item'),
    indexMediaImage: document.querySelectorAll('.work-index-item-video'),
    indexMediaArrow: document.querySelectorAll('.work-index-item-media-arrow'),
};

const animateIndexItem = (item) =>{
    const itemImages = item.querySelectorAll('.work-index-item-video');
    const itemArrows = item.querySelectorAll('.work-index-item-media-arrow');
    const itemTitle = item.querySelectorAll('.work-index-item-title');

    const tlIndexrow = gsap.timeline({
        paused: true,
        defaults: {
            duration: 0.6,
            ease: 'expo.inOut'
        },
    })
    .to(itemArrows, {autoAlpha: 1, xPercent: 0})
    .to(itemImages, {autoAlpha: 1, yPercent: 0, stagger: 0.03}, 0)
    .to(itemTitle, {autoAlpha: 0}, 0);

    item.addEventListener('mouseenter', () => tlIndexrow.play())
    item.addEventListener('mouseleave', () => tlIndexrow.reverse())
};

let isActive = false;
const addEventListener = () => {
    const tlToggle = gsap.timeline({paused:true}).to(toggle.circle, {
        xPercent: 140,
        duration: 0.2,
        ease: 'expo.inOut',
    });
    gsap.set(view.index, {
        autoAlpha:0,
        display: 'none'
    });

    const tlView = gsap.timeline({paused: true}).to(view.grid, {
        duration: 0.6,
        autoAlpha: 0,
        display: 'none',
        ease: 'expo.inOut',
        onComplete: () => {
            tlView.to(view.index, {
                autoAlpha: 1,
                display: 'block'
            });
        },
    });
    toggle.element.addEventListener('click', () => {
        !isActive ? tlToggle.play() : tlToggle.reverse();
        !isActive ? tlView.play() : tlView.reverse();

        isActive = !isActive;
    });
    view.indexItem.forEach((item) => {
        gsap.set(view.indexMediaImage, {
            autoAlpha: 0,
            yPercent: 100
        });
        gsap.set(view.indexMediaArrow, {
            autoAlpha: 0,
            xPercent: -100
        });
        animateIndexItem(item);
    });

};
addEventListener();