export function lotties() {
    if(!isMobile()) {
        
        // CREATE HAMBURGER LOTTIE ///////////////////////////////////////////////////////
        const arrowCircle = function() {
    
            let arrowIcon = document.querySelectorAll(".arrow-btn:not(.link-button)")
            arrowIcon.forEach(ai => {
                let arrowLottie = lottie.loadAnimation({
                    container: ai, // the dom element that will contain the animation
                    renderer: 'svg',
                    loop: false,
                    autoplay: false,
                    path: 'js/lottie/arrow.json',
                    rendererSettings: {
                        preserveAspectRatio: 'xMidYMid', // Supports the same options as the svg element's preserveAspectRatio property
                        progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
                        hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
                        className: ''
                    }
                });
                arrowLottie.stop()

                const aiBg = ai.querySelector("i")
                let tl = gsap.timeline({paused: true})
                tl.to(aiBg, {
                    scale: 1.1,
                    duration: .5,
                    ease: "power3.inOut"
                })
                ai.addEventListener("mouseenter", function() {
                    arrowLottie.setDirection(1);
                    arrowLottie.setSpeed(1)
                    arrowLottie.play()
                    // arrowLottie.addEventListener("complete", reverse)
                    tl.play().timeScale(1)
                })
                ai.addEventListener("mouseleave", function() {
                    arrowLottie.setDirection(-1);
                    arrowLottie.setSpeed(1.5)
                    arrowLottie.play()
                    tl.reverse().timeScale(-1)
                })

            })


            if(document.querySelector(".director-detail")) {
                let workButton = document.querySelector(".work-link")
                let arrowIcon = document.querySelector(".work-link span:first-of-type")
                let arrowLottie = lottie.loadAnimation({
                    container: arrowIcon, // the dom element that will contain the animation
                    renderer: 'svg',
                    loop: false,
                    autoplay: false,
                    path: 'js/lottie/arrow.json',
                    rendererSettings: {
                        preserveAspectRatio: 'xMidYMid', // Supports the same options as the svg element's preserveAspectRatio property
                        progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
                        hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
                        className: ''
                    }
                });
                arrowLottie.stop()

                const aiBg = workButton.querySelector("i")
                let tl = gsap.timeline({paused: true})
                tl.to(aiBg, {
                    scale: 6,
                    duration: .5,
                    ease: "power3.inOut"
                })
                workButton.addEventListener("mouseenter", function() {
                    arrowLottie.setDirection(1);
                    arrowLottie.setSpeed(1)
                    arrowLottie.play()
                    // arrowLottie.addEventListener("complete", reverse)
                    tl.play().timeScale(1)
                })
                workButton.addEventListener("mouseleave", function() {
                    arrowLottie.setDirection(-1);
                    arrowLottie.setSpeed(1)
                    arrowLottie.play()
                    tl.reverse().timeScale(-1)
                })

            }




        }
        arrowCircle()
        

        // REW BUTTON FOR PAGER LOTTIE ///////////////////////////////////////////////////////
        const sliderBtns = function() {
            const btnTag = document.querySelectorAll(".rew-buttons button")
            btnTag.forEach(btn => {
                let btnLottie = lottie.loadAnimation({
                    container: btn, // the dom element that will contain the animation
                    renderer: 'svg',
                    loop: false,
                    autoplay: false,
                    path: '../js/lottie/rew-lottie.json',
                    rendererSettings: {
                        preserveAspectRatio: 'xMidYMid', // Supports the same options as the svg element's preserveAspectRatio property
                        progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
                        hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
                        className: ''
                    }
                });
                btnLottie.stop()
        
                btn.addEventListener("mouseenter", function() {
                    btnLottie.setDirection(1);
                    btnLottie.setSpeed(1)
                    btnLottie.play()
                })
                btn.addEventListener("mouseleave", function() {
                    btnLottie.setDirection(-1);
                    btnLottie.setSpeed(1)
                    btnLottie.play()
                })
            })
        }
        sliderBtns()
   
    }
}