import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration } from '../utils/store'
import { debounce } from '../utils/functions'


/*
** Transition In
*/
export const animateIn = () => {
    // Title: Houses
    const titleHouses = ScrollOut({
        once: true,
        targets: '#title-houses',
        onShown (el) {
            // Reveal
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['-70%', 0],
                delay: anime.stagger(80),
                duration: animDuration,
                easing: 'easeOutQuart'
            })

            // Parallax on scroll
            const translate = anime.timeline({
                autoplay: false,
                duration: animDuration
            })
            translate.add({
                targets: el,
                translateX: ['-3%', '-17%'],
                easing: 'easeOutQuart',
                duration: animDuration
            })
            window.addEventListener('scroll', debounce(event => {
                translate.seek(translate.duration * (window.scrollY / 1000))
            }), 50)
        }
    })

    // Intro: Description
    const introDescription = ScrollOut({
        once: true,
        targets: '#intro-description',
        onShown (el) {
            anime({
                targets: el.querySelectorAll('p, a'),
                opacity: [0, 1],
                translateY: [8, 0],
                duration: animDuration,
                delay: anime.stagger(200, { start: 400 }),
                easing: 'easeOutQuart'
            })
        }
    })

    // Intro: Carousel
    const introCarousel = ScrollOut({
        once: true,
        targets: '#intro-carousel',
        onShown(el) {
            anime({
                targets: el,
                opacity: [0, 1],
                translateY: [24, 0],
                duration: animDuration,
                delay: 650,
                easing: 'easeOutQuart'
            })
        }
    })

    // Title: Of
    const titleOf = ScrollOut({
        once: true,
        targets: '#title-of',
        onShown (el) {
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
                delay: anime.stagger(70),
                duration: animDuration,
                easing: 'easeOutQuart'
            })
        }
    })

    // Title: World
    const titleWorld = ScrollOut({
        once: true,
        targets: '#title-world',
        onShown (el, ctx) {
            anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
                delay: anime.stagger(70),
                duration: animDuration,
                easing: 'easeOutQuart'
            })

            // Parallax on scroll
            const translate = anime.timeline({
                autoplay: false,
                duration: animDuration
            })
            translate.add({
                targets: el,
                translateX: ['4%', '-4%'],
                easing: 'easeOutQuart',
                duration: animDuration
            })

            if (ctx.visible) {
                window.addEventListener('scroll', debounce(event => {
                    translate.seek(translate.duration * (window.scrollY / 1000))
                }), 35)
            }
        }
    })
}