var $ = jQuery;;
(function($) {
    "use strict";
    const BODY = document.body;
    $(document).ready(function() {
        function burggerMainMenu() {
            let burgerButto = document.querySelector('[header-menu]')
            if (burgerButto) {
                burgerButto.addEventListener('click', () => {
                    if (BODY.classList.contains('primaryActiveMenu')) {
                        BODY.classList.remove('primaryActiveMenu')
                        burgerButto.classList.remove('active')
                    } else {
                        BODY.classList.add('primaryActiveMenu')
                        burgerButto.classList.add('active')
                    }
                })
            }
        }

        function burggerMenu() {
            let burgerButto = document.querySelector('[data-burger-menu]')
            if (burgerButto) {
                burgerButto.addEventListener('click', () => {
                    if (BODY.classList.contains('menuActive')) {
                        BODY.classList.remove('menuActive')
                        burgerButto.classList.remove('active')
                    } else {
                        BODY.classList.add('menuActive')
                        burgerButto.classList.add('active')
                    }
                })
            }
        }

        function srollDirection() {
            let tempScrollPos = 0
            document.addEventListener('scroll', () => {
                let currentScrollY = window.scrollY

                currentScrollY > 10 ?
                    BODY.classList.add('scrolled') :
                    BODY.classList.remove('scrolled')
                currentScrollY < tempScrollPos ?
                    BODY.classList.add('scrolling_top') :
                    BODY.classList.remove('scrolling_top')

                tempScrollPos = currentScrollY
            })
        }
        
       function viewPortChecker () {
        inView.offset(100);
        setTimeout(() => {
          inView('[data-inView]')
            .on('enter', (el) => {
              el.classList.add('inView')
            })
        }, 500)
      }

        function smoothScroll() {
            if (window.screen.width >= 1029) {
                window.lenis = new Lenis()
                let menuLinks = document.querySelectorAll('[data-scrol]')

                menuLinks.forEach((link) => {
                    link.addEventListener('click', (e) => { 
                        e.preventDefault()
                        let target = link.dataset.scrol,
                            el = document.getElementById(target)

                        if (el) {
                            const NavItems = document.querySelectorAll('.nav-link')
                            NavItems.forEach((element) => {
                                element.classList.remove('active')
                            })
                            link.classList.add('active')
                            window.lenis.scrollTo(el, {
                                lock: true
                            })
                        }
                    })
                })

                function raf(time) {
                    window.lenis.raf(time)
                    requestAnimationFrame(raf)
                }
                requestAnimationFrame(raf)
            }
        }

        function scrollProgress() {
            var progressPath = document.querySelector('.progress-wrap path')
            if (progressPath) {
                var pathLength = progressPath.getTotalLength()
                progressPath.style.transition = progressPath.style.WebkitTransition = 'none'
                progressPath.style.strokeDasharray = pathLength + ' ' + pathLength
                progressPath.style.strokeDashoffset = pathLength
                progressPath.getBoundingClientRect()
                progressPath.style.transition = progressPath.style.WebkitTransition =
                    'stroke-dashoffset 10ms linear'
                var updateProgress = function() {
                    var scroll = window.scrollY

                    var html = document.documentElement

                    var height = html.clientHeight - html.scrollHeight

                    var progress = pathLength - (scroll * pathLength) / height
                    progressPath.style.strokeDashoffset = progress
                }
                updateProgress()
                document.addEventListener('scroll', updateProgress)
                var offset = 50
                var duration = 550
                document
                    .querySelector('.progress-wrap')
                    .addEventListener('click', function(event) {
                        event.preventDefault()
                        if (window.lenis) window.lenis.scrollTo(0)
                        return false
                    })
            }
        }

        function bodyVariables() {
            // body varibales
            setTimeout(() => {
                let fel = document.querySelector('footer'),
                    footerH = fel ? fel.clientHeight : 0,
                    hel = document.querySelector('header'),
                    headerH = hel ? hel.clientHeight : 90

                let r = document.querySelector('body')
                r.style.setProperty('--footer-height', footerH + 'px')
                r.style.setProperty('--header-height', headerH + 'px')
            }, 40)
        }

    

        jQuery(".the-arrow").on("click", function(e) {
            e.preventDefault(),
                jQuery(this).hasClass("menu-clicked") ? (jQuery(this).prev("ul").slideUp(300, function() {}),
                    jQuery(this).closest(".menu-item").removeClass("dropdown-opened")) : (jQuery(this).prev("ul").slideDown(300, function() {}),
                    jQuery(this).closest(".menu-item").addClass("dropdown-opened")), jQuery(this).toggleClass("menu-clicked")
        });


        const loaderTemp = document.querySelector('[data-loader]')
        setTimeout(() => BODY.classList.add('dom_loaded'), 2300)

        if (loaderTemp) {
            setTimeout(() => loaderTemp.remove(), 3800)
            setTimeout(() => {
                BODY.classList.add('dom_animStart')
            }, 2600)
        }

        bodyVariables()
        smoothScroll()
        burggerMainMenu()
        burggerMenu()
        srollDirection()
        viewPortChecker()
        scrollProgress()
        addEventListener('resize', (event) => {
            bodyVariables()
        })
    })
})($);

function init_scroll() {
    "use strict";
    gsap.registerPlugin(ScrollTrigger);

    let mq = gsap.matchMedia();
    mq.add("(max-width: 1029px)", () => {
        $('body').addClass("gsap-disabled");
    });

    mq.add("(min-width: 1030px)", () => {

        if ($(".portfolio-image").length) {

            let bgImg = document.querySelector(".portfolio-image");
            let portfolio_pin = Array.from(document.getElementsByClassName("portfolio-pin"));
            let pin_count = portfolio_pin.length;
            ScrollTrigger.create({
                trigger: bgImg,
                pin: '.portfolio-grid .sticky',
                pinSpacing: false,
                start: "50% 50%",
                end: () => "+=" + (portfolio_pin[pin_count - 1].getBoundingClientRect().bottom - bgImg.getBoundingClientRect().bottom)
            });

            ScrollTrigger.create({
                trigger: bgImg,
                pin: true,
                pinSpacing: false,
                start: "50% 50%",
                toggleClass: "active",
                // pin until the bottom of the .s6 section hits the bottom of the .bgImg
                end: () => "+=" + (portfolio_pin[pin_count - 1].getBoundingClientRect().bottom - bgImg.getBoundingClientRect().bottom)

            });

            var text = document.querySelector("#page-no");
            document.querySelector("#page-end").innerText = $(".portfolio-slide").length;

            var elements = Array.from(document.getElementsByClassName("portfolio-pin")); //
            elements.forEach(function(s, i) {
                let section = s,
                image = $(".portfolio-slide").eq(i);
                var total = elements.length - 1;
                if (i != 0) {
                    gsap.set(image, {
                        y: 0,
                        yPercent: 100
                    });
                }


                gsap.to(image, {
                    yPercent: 0,
                    ease: "none",
                    scrollTrigger: {
                        trigger: section,
                        start: () => "top 50%+=" + (bgImg.offsetHeight / 2) + "px",
                        end: "+=" + bgImg.offsetHeight,
                        scrub: true,
                        toggleClass: "active",
                        onEnter() {
                            if (i == 0) {
                                image[0].classList.add('active');
                            }
                        },
                        onEnterBack() {
                            if (i == 0) {
                                image[0].classList.add('active');
                            }
                        },
                        onLeave() {
                            if (i == 0) {
                                image[0].classList.remove('active');
                            }
                        },


                        onToggle: self => {
                            if (i != total && i != 0) {
                                if (typeof(image[0]) != "undefined") {
                                    image[0].classList.toggle('active');
                                }

                            }
                            if (self.isActive) {
                                text.innerText = (i + 1);
                            }
                        },

                        snap: {
                            snapTo: (image.length),
                            duration: {
                                min: 0.25,
                                max: 0.75
                            },
                            delay: 0.125, // wait 0.125 seconds from the last scroll event before doing the snapping
                            ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
                        }

                    }
                })

                //}
            });

        }
        if ($(".sticky-education").length) {
            const horizontalSections = gsap.utils.toArray('.education .horizontal')
            var thisPinWrap = document.querySelector('.education .pin-wrap');
            var thisAnimWrap = thisPinWrap.querySelector('.education .animation-wrap');
            ScrollTrigger.create({
                trigger: thisAnimWrap,
                pin: '.sticky-education',
                pinSpacing: false,
                start: "50% 50%",
                end: () => "+=" + (thisAnimWrap.scrollWidth - document.querySelector('.education-slides').clientWidth),
                scrub: true,

            });

            horizontalSections.forEach(function(sec, i) {

                var thisPinWrap = sec.querySelector('.education .pin-wrap');
                var thisAnimWrap = thisPinWrap.querySelector('.education .animation-wrap');
                var getToValue = () => -(thisAnimWrap.scrollWidth - document.querySelector('.education-slides').clientWidth);

                gsap.fromTo(thisAnimWrap, {
                    x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()
                }, {
                    x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0,
                    ease: "none",
                    scrollTrigger: {
                        trigger: sec,
                        start: "50% 50%",
                        end: () => "+=" + (thisAnimWrap.scrollWidth - document.querySelector('.education-slides').clientWidth),
                        pin: thisPinWrap,
                        invalidateOnRefresh: true,
                        scrub: true,
                    }
                });
            });
        }
    });

    "use strict";
    $(".bar").each(function() {
        var $bar = $(this),
            $percentage = $bar.find(".percentage"),
            data = "#000";
        $bar.data("bar");
        setTimeout(function() {
            $bar.css("background-color", data.color)
                .animate({
                    "width": $percentage.html()
                }, data.speed || 2000, function() {

                    $percentage.css({
                        "color": data.color,
                        "opacity": 1
                    });

                });

        }, data.delay || 0);

    });

    var swiper = new Swiper(".swiper-container-wrap", {
        direction: "horizontal",
        effect: "slide",
        //  autoHeight: true,
        autoplay: false,
        parallax: false,
        speed: 1600,
        loop: true,
        loopFillGroupWithBlank: !0,
        keyboard: {
            enabled: true,
            onlyInViewport: true
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        breakpoints: {
            640: {
                slidesPerView: 1,
                spaceBetween: 0,
            },
            768: {
                slidesPerView: 1,
                spaceBetween: 0,
            },
            1024: {
                slidesPerView: 1,
                spaceBetween: 0,
            },
        },

    });
    document.querySelectorAll('a[href^="#"]').forEach((el) => {
        el.addEventListener('click', (e) => {
            e.preventDefault()
            const id = el.getAttribute('href')?.slice(1)
            if (!id) return
            const target = document.getElementById(id)
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center',
                    inline: 'center'
                })
            }
        })
    })
}