// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.



//1- change by click buttons
//2- method to call n
function animate(listOfData) {

    var mainImage = document.getElementById("mainImage");
    var mainText = document.getElementById("mainText");

    var currentIndex = -1; // Start at -1 so first changeIndex(1) goes to 0

    changeIndex(1)
    var x = setInterval(changeIndex, 4000, 1);

    document.getElementById("next").onclick = function () {
        clearInterval(x);
        changeIndex(1)
        x = setInterval(changeIndex, 4000, 1);
    }

    document.getElementById("prev").onclick = function () {
        clearInterval(x);
        changeIndex(-1)
        x = setInterval(changeIndex, 4000, 1);
    }

    function changeIndex(i) {
        if (currentIndex + i >= listOfData.length) {
            currentIndex = 0;
        }
        else if (currentIndex + i < 0) {
            currentIndex = listOfData.length - 1;
        }
        else {
            currentIndex += i;
        }

        changeInfo(listOfData)
        animateText();
    }

    function changeInfo(listOfData) {
        mainImage.src = listOfData[currentIndex][1];
        mainText.innerText = listOfData[currentIndex][0];

        // 1. Absolutely kill transition via inline style and classes
        mainImage.style.transition = 'none';
        mainImage.classList.remove("transition", "transition-all", "duration-[4000ms]");

        // Determine direction based on current presence of scale-125
        const shouldZoomIn = !mainImage.classList.contains("scale-125");

        // 2. Snap to STARTING position
        if (shouldZoomIn) {
            mainImage.classList.remove("scale-125"); // Snap to 100%
        } else {
            mainImage.classList.add("scale-125");    // Snap to 125%
        }

        // Force reflow
        void mainImage.offsetWidth;

        // 3. Re-enable transition and set TARGET position
        mainImage.style.transition = '';
        mainImage.classList.add("transition", "duration-[4000ms]");

        if (shouldZoomIn) {
            mainImage.classList.add("scale-125");    // Animate 100% -> 125%
        } else {
            mainImage.classList.remove("scale-125"); // Animate 125% -> 100%
        }
    }

    function animateText() {
        var textWrapper = document.querySelector('.ml14 .letters');
        if (!textWrapper) return;

        textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter lg:text-5xl md:text-4xl text-3xl text-accent'>$&</span>");

        anime.timeline({ loop: false })
            .add({
                targets: '.ml14 .line',
                scaleX: [0, 1],
                opacity: [0.5, 1],
                easing: "easeInOutExpo",
                duration: 500
            }).add({
                targets: '.ml14 .letter',
                opacity: [0, 1],
                translateX: [40, 0],
                translateZ: 0,
                scaleX: [0.3, 1],
                easing: "easeOutExpo",
                duration: 350,
                offset: '-=600',
                delay: (el, i) => 150 + 25 * i
            })
            .add({
                targets: '.ml14',
                opacity: 1,
                duration: 0,
                easing: "easeOutExpo",
                delay: 0
            });
    }

}