import anime from 'animejs'
import { animDuration, animDurationLong } from 'utils/store'


/*
** Transition In
*/
export const animateIn = scope => {
    // Panel itself
    const transition = anime({
        targets: scope.querySelector('.transition__background'),
        scaleY: [1, 1],
        opacity: [0, 1],
        duration: 400,
        easing: 'easeInOutQuart',
        begin () {
            // Show the panel
            scope.classList.remove('hidden')
        }
    })
    // Globe icon
    const globe = anime({
        targets: scope.querySelector('svg'),
        opacity: [0, 1],
        translateY: ['16px', 0],
        duration: 400,
        easing: 'easeInOutQuart'
    })

}


/*
** Transition Out
*/
export const animateOut = (scope, callback) => {
    // Background
    const background = anime({
        targets: scope.querySelector('.transition__background'),
        scaleY: [1, 0],
        duration: animDurationLong,
        delay: 800,
        easing: 'easeInOutQuart',
        complete () {
            // Hide the panel
            scope.classList.add('hidden')

            // Run callback
            callback()
        }
    })

    // Title
    const title = anime({
        targets: scope.querySelector('.title-location'),
        opacity: [1, 0],
        translateY: [0, '-50vh'],
        duration: animDuration,
        delay: 1000,
        easing: 'easeInOutQuart'
    })

    // Globe icon
    const globe = anime({
        targets: scope.querySelector('svg'),
        opacity: [1, 0],
        translateY: [0, '-50vh'],
        duration: animDuration,
        delay: 1000,
        easing: 'easeInOutQuart'
    })
}