import anime from 'animejs'
import ScrollOut from 'scroll-out'
import imagesLoaded from 'imagesloaded'
import { throttle, parallaxAnime } from 'utils/functions'


/*
** Transition In
*/
export const animateIn = scope => {
    // Title (reveal on scroll)
    const titleReveal = ScrollOut({
        once: true,
        targets: scope.querySelector('h2'),
        onShown (el) {
            // Title reveal
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
                easing: 'easeOutQuart',
                duration: 1000,
                delay: anime.stagger(120)
            })
        }
    })

    // Photo (reveal on scroll)
    imagesLoaded(scope.querySelector('.photo__image'), instance => {
        const image = instance.elements[0]
        const photoReveal = ScrollOut({
            once: true,
            targets: image,
            onShown (el) {
                // Load the photo then reveal it
                anime({
                    targets: el.querySelector('img'),
                    scale: [1.12, 1],
                    opacity: [0, 1],
                    easing: 'easeOutQuart',
                    duration: 2000,
                    delay: 50
                })
            }
        })
    })

    // Number parallax on scroll
    const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
    const nbParallax = matchMedia => {
        if (matchMedia.matches) {
            const scroll = ScrollOut({
                targets: scope.querySelector('.photo__number span'),
                onShown (el) {
                    const translate = anime({
                        targets: el,
                        translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-15%', '15%'],
                        duration: 2000,
                        easing: 'linear',
                        autoplay: false
                    })
                    window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 50))
                    setTimeout(() => parallaxAnime(el, translate), 50)
                    console.log('show')
                },
                onHidden () {
                    if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
                }
            })
        }
    }

    // Listen on screen size to run the function
    nbParallaxMedia.addListener(nbParallax)
    nbParallax(nbParallaxMedia)
}