import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration, animDurationLong } from '../utils/store'
import { throttle, parallaxAnime } from '../utils/functions'


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

    // Photo appearing
    const photoReveal = ScrollOut({
        once: true,
        targets: scope.querySelector('picture'),
        onShown (el) {
            // Title reveal
            anime({
                targets: el.querySelector('img'),
                scale: [1.12, 1],
                opacity: [0, 1],
                duration: 2000,
                delay: 50,
                easing: 'easeOutQuart'
            })
        }
    })

    // Number parallax on scroll
    const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
    const nbParallax = nbParallaxMedia => {
        if (nbParallaxMedia.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', () => parallaxAnime(el, translate))
                    setTimeout(() => parallaxAnime(el, translate), 50)
                },
                onHidden () {
                    window.removeEventListener('scroll', parallaxAnime)
                }
            })
        }
    }

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