const IS_TOUCH_DEVICE = 'ontouchstart' in document.documentElement; //detect is touch device

//language
function SetLanguage(lang){
  document.documentElement.lang = lang; // set html lang
  $("*[textLang]").each(function() {
//      if (typeof $(this).attr("placeholder") !== "undefined" && $(this).attr("placeholder") !== false) $(this).attr("placeholder", LANGS[lang][$(this).attr("textLang")]);
      
//      if (typeof LANGS[lang][$(this).attr("textLang") + "-text"] !== "undefined") $(this).html(LANGS[lang][$(this).attr("textLang") + "-text"]);
      
        if (typeof LANGS[lang][$(this).attr("textLang")] !== "undefined") $(this).html(LANGS[lang][$(this).attr("textLang")]);

        if (typeof $(this).attr("title") !== "undefined"){
            if (typeof LANGS[lang][$(this).attr("textLang") + "-tooltip"] !== "undefined"){
                $(this).attr("title", LANGS[lang][$(this).attr("textLang") + "-tooltip"]);
            } else {
                $(this).attr("title", LANGS[lang][$(this).attr("textLang")]);
            }
        }

        if (typeof $(this).attr("value") !== "undefined"){
            if (typeof LANGS[lang][$(this).attr("textLang") + "-val"] !== "undefined"){
                $(this).attr("value", LANGS[lang][$(this).attr("textLang") + "-val"]);
            } else {
                $(this).attr("value", LANGS[lang][$(this).attr("textLang")]);
            }
        }
    });
}

// roller
function SetRoller(index) {
    const quotes = document.querySelectorAll("#main .quote-wrapper .quotes");
    const navItems = document.querySelectorAll("#main .roller .next-prev li");

    quotes.forEach(q => q.classList.remove("showing"));
    navItems.forEach(n => n.classList.remove("active"));

    if (quotes[index]) quotes[index].classList.add("showing");
    if (navItems[index]) navItems[index].classList.add("active");
}
function AutomaticChangeRoller() {
    const quoteWrapper = document.querySelector("#main .quote-wrapper");
    if (window.getComputedStyle(quoteWrapper).visibility === "visible") {
        const quotes = document.querySelectorAll("#main .quote-wrapper .quotes");
        const currentIndex = Array.from(quotes).findIndex(q => q.classList.contains("showing"));
        const nextIndex = (currentIndex + 1) % quotes.length;
        SetRoller(nextIndex);
    }
}

function delayForm(formUrl) { // ???
	var hrefChangeInterval = setInterval(function() {
		clearInterval(hrefChangeInterval);
		window.location.href = formUrl;
	}, 10000);
}

var velocity = 0.2;
function fn_bgScroll(){ // ???
    var pos = $(window).scrollTop(); 
    var height = $('.image-splash').height();
    var img = $('.image-splash').css("backgroundPosition");
    var x = img.split(' ');
	var x2 = x[1];
    var h_pos = x2.indexOf("p");
    var imgHeight = x2.substr(0, h_pos);
    $(".image-splash").css('backgroundPosition', '50% ' + Math.round((imgHeight*1 - pos) * velocity) +  'px');
};


/* event handlers */
function ChangeSection(target){
    const container = document.getElementById("scrollHorizontal");

    // no changes
    if (target.classList.contains("active")) return false;

    
    // change url
    let url = new URL(window.location);
    url.searchParams.set("section", target.getAttribute("data-id")); // Добавя нов параметър към URL-то
    window.history.pushState({}, '', url);


    // change tab - content
    const target_ID = target.getAttribute("data-id");
    const oldTarget_ID = container.querySelector(".tab.active")?.getAttribute("data-id");

    const oldSection = document.getElementById(oldTarget_ID);
    if (oldSection) oldSection.style.display = "none";    
    
    const section = document.getElementById(target_ID);
    if (section) section.style.display = "";
    

    // change tab - visual
    container.querySelector(".active")?.classList.remove("active");
    target.classList.add("active");

    // scroll this tab to be centered
    target.scrollIntoView({
        behavior: "smooth",
        inline: "center",
        block: "nearest"
    });   
}
function RevealSectionHandler(e) {
    const text = this.querySelector(".text p");
    const icon = this.querySelector(".flip-sign");

    // hide one 
    if (text.classList.contains("show")) {
        text.classList.remove("show");
        text.style.height = null;
        icon.classList.remove("active");
        return 0;
    }

    // hide all
    e.currentTarget.closest(".parentSection").querySelectorAll(".reveal-section").forEach(item => {
        const text = item.querySelector(".text p");
        const icon = item.querySelector(".flip-sign");

        text.classList.remove("show");
        text.style.height = null;
        icon.classList.remove("active");
    });

    // show clicked
    text.classList.add("show");
    text.style.height = text.scrollHeight + "px";
    icon.classList.add("active");
}
function StickyHandler(e) {
    if (window.innerHeight < 450) return;

    const header = document.querySelector("#header");
    const navbar = document.querySelector("#navbar");
    const headerHeight = header.offsetHeight;
    
    if (window.pageYOffset >= headerHeight) {
        if (window.innerWidth > 767) {
            navbar.classList.add("sticky");
            return;
        }

        header.classList.add("sticky");
        return;
    }

    navbar.classList.remove("sticky");
    header.classList.remove("sticky");
    
}

$(document).ready(function (e) {
    SetLanguage("bg");

    // Create the observer like the examples above
    const observer = new IntersectionObserver(entries => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                // fadeInLeft with with delay on every next element
                if (entry.target.classList.contains("fadeInLeft") && entry.target.classList.contains("delay")) {
                    setTimeout(() => {
                        entry.target.style.visibility='visible';
                        entry.target.style.animation = '';
                    }, index * 50);
                } else {
                    entry.target.style.visibility='visible';
                    entry.target.style.animation = '';
                }
                return;
            }
//            entry.target.style.visibility='hidden';
//           entry.target.style.animation = 'none';
        });
    });
    // Get multiple elements instead of a single one using "querySelectorAll"
    const squares = document.querySelectorAll('.ucs-animation');
    // Loop over the elements and add each one to the observer
    squares.forEach((element) => observer.observe(element));

    //sticky header
    document.addEventListener("scroll", StickyHandler);

    $("#header").on("click", ".menu", function(e) {
        if ($(this).hasClass("show")){            
            $(this).removeClass("show");
            $("#nav").removeClass("show");
            document.body.style.overflow = "";
            document.getElementById("header").style.height = "";
        } else {
            $(this).addClass("show");
            $("#nav").addClass("show");
            document.body.style.overflow = "hidden";
            document.getElementById("header").style.height = "100%";
            
        }
    });

    // set roller script
    if (document.querySelectorAll(".widget_roller").length > 0) {
        // set automatic change roller
        let rollerInverval = setInterval("AutomaticChangeRoller()", 12000); // 12 sec

        const buttons = document.querySelectorAll(".roller ul li");
        if (buttons.length === 0) return; // no buttons

        // manual change roller
        buttons.forEach(btn => {
            btn.addEventListener("click", (e) => {
                SetRoller(e.target.textContent);
                if (rollerInverval) clearInterval(rollerInverval);
                rollerInverval = setInterval("AutomaticChangeRoller()", 12000); // restart interval
            });
        });
    }

    // HOME PAGE
    if (window.location.href.endsWith("/")) {
        // // animations on ballons
        // const ballon1 = document.querySelector(".logo-item .ballon-1");
        // setInterval(() => {
        //     ballon1.classList.add("animate-2s");
        //     setTimeout(() => {
        //         ballon1.classList.remove("animate-2s");
        //     }, 2000); // animation duration
        // }, 10000); // repeat interval

        // const ballon4 = document.querySelector(".logo-item .ballon-4");
        // setInterval(() => {
        //     ballon4.classList.add("animate-2s");
        //     setTimeout(() => {
        //         ballon4.classList.remove("animate-2s");
        //     }, 2000); // animation duration
        // }, 8000); // repeat interval

        // const ballon5 = document.querySelector(".logo-item .ballon-5");
        // setInterval(() => {
        //     ballon5.classList.add("animate-3s");
        //     setTimeout(() => {
        //         ballon5.classList.remove("animate-3s");
        //     }, 3000); // animation duration
        // }, 15000); // repeat interval

        // //animation on button
        // const headerBtn = document.getElementById("headerButton");
        // setInterval(() => {
        //     headerBtn.classList.add("animate-2s");
        //     setTimeout(() => {
        //         headerBtn.classList.remove("animate-2s");
        //     }, 800); // animation duration
        // }, 10000); // repeat interval        
    }

    // FAQ
    if (window.location.href.includes("faq")) {
        // open close answer
        document.querySelectorAll(".reveal-section").forEach(section => section.addEventListener("click", RevealSectionHandler));
    }

    // FEATURES
    if (window.location.href.includes("features")) {
        // get search from URL and find target section
        let section_ID = new URLSearchParams(window.location.search).get("section");
        if (!section_ID || section_ID === "features_10") section_ID = "features_1";


        const target = document.querySelector(`div[data-id='${section_ID}']`);
        
        setTimeout(() => {
            if (target) ChangeSection(target);  
        }, 100);

        // remove section from URL
        // const url = new URL(window.location.href);
        // url.searchParams.delete("section");
        // window.history.replaceState({}, document.title, url.toString());
        
        // if (!target) return;

        // const yOffset = -160;
        // const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
        // $('html, body').animate({ // scroll effect
        //     scrollTop: y
        // }, 800);


        const container = document.getElementById("scrollHorizontal");

        // arrow left go to prev section
        document.getElementById("barLeft").addEventListener("click", (e) => {
            const target = container.querySelector(".tab.active").previousElementSibling;
            if (target) ChangeSection(target);
        });
        // arrow right go to next section
        document.getElementById("barRight").addEventListener("click", (e) => {
            const target = container.querySelector(".tab.active").nextElementSibling;
            if (target) ChangeSection(target);
        });

        // scroll horizontally on mouse drag and change sections
        let isDown = false;
        let startX;
        let scrollLeft;
        let isDragging = false;
        container.addEventListener(IS_TOUCH_DEVICE ? "touchstart" : "mousedown", (e) => {
            isDown = true;
            isDragging = false;
            startX = e.pageX - container.offsetLeft;
            scrollLeft = container.scrollLeft;
        });
        container.addEventListener(IS_TOUCH_DEVICE ? "touchmove" : "mousemove", (e) => {
            e.preventDefault(); // touch scroll prevent 
            if (!isDown) return;
            if (window.innerWidth <= 767) return;

            const x = e.pageX - container.offsetLeft;
            const walk = (x - startX) * 0.8;

            if (Math.abs(walk) > 5) {
                isDragging = true;
                container.classList.add("scrolling");
            }

            container.scrollLeft = scrollLeft - walk;
        });        
        container.addEventListener(IS_TOUCH_DEVICE ? 'touchend' : 'mouseup', (e) => {
            isDown = false;
            container.classList.remove("scrolling");

            // if not dragging simulate click event
            const target = e.target.closest(".tab");
            if (!isDragging && target) ChangeSection(target);            

            isDragging = false;
        });
        container.addEventListener(IS_TOUCH_DEVICE ? 'touchcancel' : 'mouseleave', () => {
            isDown = false;
            container.classList.remove("scrolling");            
        }); 
        
        // trigger text in reveal section
        document.querySelectorAll(".reveal-section").forEach(section => section.addEventListener("click", RevealSectionHandler));
    }


});