import gsap from 'gsap';
const imagesLoaded = require('imagesloaded');
import {handleTouchMove} from './handleTouchMove';
import {checkScrollInElem} from './checkScrollInElem';

const imagesReady = () => {
    return new Promise(resolve => {
        imagesLoaded( '#wrapper', resolve );
    });
};
//show
function startSplash() {
    //スクロール禁止
    document.addEventListener('touchmove', handleTouchMove, { passive: false });
    document.addEventListener('mousewheel', handleTouchMove, { passive: false });
    //スプラッシュ
    const isHome = document.body.classList.contains('home');
    isHome && gsap.set(".jsHeroFadeIn", { y:10, autoAlpha: 0 });
    (async () => {
        await imagesReady();
            var tl = gsap.timeline().pause();
            tl.to("#opening", {  opacity: 0, duration: 0.6, display:'none',
            onComplete:function(){
                isHome && gsap.to(".jsHeroFadeIn", { duration:0.8, y:0, autoAlpha:1, ease: "power2.out", stagger:0.4});
                //スクロール復帰
                document.removeEventListener('touchmove', handleTouchMove, { passive: false });
                document.removeEventListener('mousewheel', handleTouchMove, { passive: false });
                checkScrollInElem();
            }},"end");
            tl.play();
            sessionStorage.setItem('visited', 'already');
    })();
}

//skip
function passSplash() {
    //some codes here
}

export function handleSplashThenScrollInElem() {
    const visited = sessionStorage.getItem('visited');
    visited ? passSplash():startSplash();
}