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


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

    // Carousel
    const carousel = anime({
        targets: document.querySelector('.intro .carousel'),
        translateY: [32, 0],
        opacity: [0, 1],
        easing: 'easeOutQuart',
        duration: animDuration,
        delay: animDelay,
        complete: event => event.animatables[0].target.removeAttribute('style')
    })

    // Parallax on scroll
    const translate = anime({
        targets: '#title-houses',
        translateX: ['7%', '-15%'],
        easing: 'linear',
        duration: animDuration,
        autoplay: false
    })
    window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 5))
    requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate))

    // Intro: Description
    const introDescription = anime({
        targets: document.getElementById('intro-description').querySelectorAll('p, a'),
        opacity: [0, 1],
        translateY: [8, 0],
        easing: 'easeOutQuart',
        duration: animDuration,
        delay: anime.stagger(200, { start: animDelay + 200 })
    })

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

    // Title: World (reveal on scroll)
    const titleWorld = document.getElementById('title-world')
    const titleWorldTranslate = anime({
        targets: document.getElementById('title-world'),
        translateX: ['5%', '-3%'],
        easing: 'linear',
        autoplay: false,
        duration: animDuration
    })
    const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate)
    const titleWorldScroll = ScrollOut({
        once: true,
        targets: titleWorld,
        onShown: () => {
            const titleWorldLetters = anime({
                targets: el.querySelectorAll('span'),
                translateY: ['100%', 0],
                easing: 'easeOutQuart',
                delay: anime.stagger(70),
                duration: animDuration
            })
            window.addEventListener('scroll', throttle(() => titleWorldAnime, 10))
            requestAnimationFrame(() => titleWorldAnime)
        },
        onHidden: () => {
            if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
        }
    })
}