import $ from "jquery";

const removeStyles = (arr) => {
    arr.forEach((elem) => {
        elem.removeAttr('style')
    })
}

const initAnimation = () => {
    const trigger = document.querySelector('.js-animation')
    const breakpoint = window.matchMedia('(min-width: 1200px)');

    if (!trigger) {
        return;
    }

    let scenes = [];
    let controller = new ScrollMagic.Controller();

    const breakpointChecker = () => {
        if (breakpoint.matches) {
            if (!controller) {
                controller = new ScrollMagic.Controller();
            }
            var wipeAnimation = new TimelineMax()
                .fromTo(".js-city-title", 1, {left: "100%"}, {
                    left: -$('.js-city-title').width(),
                    ease: Linear.easeNone
                })
                .fromTo(".js-heading-description", 0.2, {x: 50, opacity: 0}, {
                    x: 0,
                    opacity: 1,
                    ease: Linear.easeNone
                }, "-=0.9")
                .fromTo(".js-heading-img1", 1, {top: "150vh"}, {
                    top: -$('.js-heading-img1').height(),
                    ease: Linear.easeNone
                }, "-=1")
                .fromTo(".js-heading-img2", 1, {top: "100vh"}, {
                    top: -$('.js-heading-img2').height(),
                    ease: Linear.easeNone
                }, "-=1")
                .to(".js-heading-description", 0.3, {
                    y: -80,
                    opacity: 0,
                    ease: Linear.easeNone
                }, "-=0.3")

            scenes.push(new ScrollMagic.Scene({
                triggerElement: ".js-section1",
                triggerHook: "onLeave",
                duration: "75%"
            })
                .setPin(".js-section1")
                .setTween(wipeAnimation)
                .addTo(controller));

            var wipeAnimation4 = new TimelineMax()
                .fromTo(".js-offices", 1, {top: 0}, {
                    top: -($('.js-offices').height() - $('.js-section2').height()),
                    ease: Linear.easeNone
                }, "-=1");

            scenes.push(new ScrollMagic.Scene({
                triggerElement: ".js-section2",
                triggerHook: "onLeave",
                duration: $('.office-info__imageset').height() - $('.js-description1').height()
            })
                .setPin(".js-description1", {
                    pushFollowers: false
                })
                .setTween(wipeAnimation4)
                .addTo(controller));

            var wipeAnimation2 = new TimelineMax()
                .fromTo(".js-description2", 1, {x: "-100%", opacity: 0}, {x: 0, opacity: 1, ease: Linear.easeNone})
                .fromTo(".js-subtitle1", 1, {x: "-100", opacity: 0}, {
                    x: "0",
                    opacity: 1,
                    ease: Linear.easeNone
                }, "-=1")
                .fromTo(".js-office-image1", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}, "-=1")
                .to(".js-office-image1 img", 1, {left: 0})
                .fromTo(".js-office-image2", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone})
                .to([".js-office-image2", ".js-office-image1"], 1, {x: "100%", opacity: 0})
                .to([".js-description2"], 1, {x: "200%", opacity: 0}, "-=0.5");

            scenes.push(new ScrollMagic.Scene({
                triggerElement: ".js-section3",
                triggerHook: "onLeave",
                duration: "250%"
            })
                .setPin(".js-section3", {
                    spacerClass: 'office-info__spacer'
                })
                .setTween(wipeAnimation2)
                .addTo(controller));

            var wipeAnimation3 = new TimelineMax()
                .fromTo(".js-office-image4", 1, {x: "-300", opacity: 0}, {
                    x: "0%",
                    opacity: 1,
                    ease: Linear.easeNone
                })
                .fromTo(".js-office-image3", 1, {x: "-100%"}, {
                    x: "0%",
                    ease: Linear.easeNone
                }, "-=0.5")
                .fromTo(".js-office-image5", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone})
                .fromTo(".js-subtitle2", 1, {y: "-20", opacity: 0}, {
                    y: "0",
                    opacity: 1,
                    ease: Linear.easeNone
                }, "-=1")

            scenes.push(new ScrollMagic.Scene({
                triggerElement: ".js-section4",
                triggerHook: "onLeave",
                duration: "20%"
            })
                .setPin(".js-section4")
                .setTween(wipeAnimation3)
                .addTo(controller));
        } else {
            if (scenes.length) {
                scenes.forEach(scene => {
                    scene.destroy(true);
                    scene.remove();
                })
                controller.destroy(true);
                controller = null;
                scenes = [];
                removeStyles([
                    $('.js-city-title'),
                    $('.js-heading-img1'),
                    $('.js-heading-img2'),
                    $('.js-heading-description'),
                    $('.js-section1'),
                    $('.js-offices'),
                    $('.js-section2'),
                    $('.js-description1'),
                    $('.js-description2'),
                    $('.js-subtitle1'),
                    $('.js-office-image1'),
                    $('.js-office-image1 img'),
                    $('.js-office-image2'),
                    $('.js-section3'),
                    $('.js-office-image4'),
                    $('.js-office-image3'),
                    $('.js-office-image5'),
                    $('.js-subtitle2'),
                    $('.js-section4')])
            }
        }
    };

    breakpoint.addListener(breakpointChecker);

    breakpointChecker();
}

export {initAnimation}