// CAROUSEL
const carouselContainer = document.querySelector('.index-carousel-container');
let carouselItems = document.querySelectorAll(".index-carousel-item");
const carouselDots = document.querySelectorAll(".index-carousel-controls-dot-item");
const carouselControlsContainer = document.querySelector('.index-carousel-controls-container');
const controls = document.querySelectorAll('.index-carousel-controls-img');

class Carousel {
    constructor(items,controls,dots){
        this.carouselArray = [...items];
        this.carouselControls = controls;
        this.carouselDots = dots;
        this.currentDotPosition = 0;
    }
    
    updateCarousel(){
        this.carouselArray.forEach((item) => {
            item.classList.remove('index-carousel-item-1')
            item.classList.remove('index-carousel-item-2')
            item.classList.remove('index-carousel-item-3')
            item.classList.remove('index-carousel-item-4')
            item.classList.remove('index-carousel-item-5')
            item.classList.remove('index-carousel-item-6')
        })

        this.carouselArray.slice(0,6).forEach((item,index) => {
            item.classList.add(`index-carousel-item-${index+1}`)
        })
    }

    setCurrentState(direction){
        if(direction.classList.contains('index-carousel-controls-prev')){
            this.carouselArray.unshift(this.carouselArray.pop());
        }else{
            this.carouselArray.push(this.carouselArray.shift());
        }
        this.updateCarousel();
    }

    useControls(){
        const triggers = [...this.carouselControls.childNodes];
        triggers.forEach(control => {
            control.addEventListener("click",(e) => {
                this.setCurrentState(control);
                this.setDotState(control);
            })
        })
    }

    setDotState(direction){
        this.updateDots();
        if (direction.classList.contains('index-carousel-controls-prev')) {
            this.currentDotPosition = (this.currentDotPosition - 1 + this.carouselDots.length) % this.carouselDots.length;
        } else {
            this.currentDotPosition = (this.currentDotPosition + 1) % this.carouselDots.length;
        }
        this.carouselDots[this.currentDotPosition].classList.add("index-carousel-controls-dot-item-active");
    }

    updateDots(){
        this.carouselDots.forEach((dot,index) => {
            dot.classList.remove('index-carousel-controls-dot-item-active');
        })
    }
}

const carousel = new Carousel(carouselItems,carouselControlsContainer,carouselDots);
if(window.innerWidth > 600){
    carousel.useControls();
}

// CAROUSEL FOR MOBILE
if(window.innerWidth < 600){
    let index = 1;
    const carouselItemWidth = carouselItems[index].clientWidth;
    const firstItemClone = carouselItems[0].cloneNode(true);
    firstItemClone.id = "carousel-item-1-clone";
    const lastItemClone = carouselItems[carouselItems.length - 1].cloneNode(true);
    lastItemClone.id = "carousel-item-last-clone";
    let currentDotPosition = 0;
    
    carouselContainer.appendChild(firstItemClone);
    carouselContainer.prepend(lastItemClone)
    
    const getUpdatedCarouselItems = () => document.querySelectorAll(".index-carousel-item");
    
    carouselContainer.style.translate = `-${carouselItemWidth * index + parseInt(getComputedStyle(carouselContainer).gap)}px`;
    

    const nextCarouselItem = () => {
        if(index >= (carouselItems.length - 1)) return;
        index++;
        carouselContainer.style.transition = "all 0.3s ease-in-out";
        carouselContainer.style.translate = `-${carouselItemWidth * index + (parseInt(getComputedStyle(carouselContainer).gap) * index)}px`;
    }
    
    const prevCarouselItem = () => {
        if(index <= 0) return;
        index--;
        carouselContainer.style.transition = "all 0.3s ease-in-out";
        carouselContainer.style.translate = `-${carouselItemWidth * index + (parseInt(getComputedStyle(carouselContainer).gap) * index)}px`;
    }
    

    
    carouselContainer.addEventListener("transitionend", (e) => {
        carouselItems = getUpdatedCarouselItems();
        if(carouselItems[index].id === firstItemClone.id){
            carouselContainer.style.transition = "none";
            index = 1;
            carouselContainer.style.translate = `-${carouselItemWidth * index + (parseInt(getComputedStyle(carouselContainer).gap) * index)}px`;
        }
        if(carouselItems[index].id === lastItemClone.id){
            carouselContainer.style.transition = "none";
            index = carouselItems.length - 2;
            carouselContainer.style.translate = `-${carouselItemWidth * index + (parseInt(getComputedStyle(carouselContainer).gap) * index)}px`;
        }
    })
    
    controls.forEach(control => {
        control.addEventListener("click", (e) => {
            if(control.classList.contains("index-carousel-controls-prev")){
                prevCarouselItem();
                setDotState(control);
            }else{
                nextCarouselItem();
                setDotState(control);
            }
        })
    })

    const setDotState = (direction) => {
        updateDots();
        if (direction.classList.contains('index-carousel-controls-prev')) {
            currentDotPosition = (currentDotPosition - 1 + carouselDots.length) % carouselDots.length;
        } else {
            currentDotPosition = (currentDotPosition + 1) % carouselDots.length;
        }
        carouselDots[currentDotPosition].classList.add("index-carousel-controls-dot-item-active");
    }

    const updateDots = () => {
        carouselDots.forEach((dot,index) => {
            dot.classList.remove('index-carousel-controls-dot-item-active');
        })
    }
}

// ANIMATED INFINITE SCROLLER
const scrollerInner = document.querySelector(".scroller-inner");
const scrollerListItems = Array.from(scrollerInner.children);
scrollerListItems.forEach((item,index) => {
  const duplicateItem = item.cloneNode(true);
  duplicateItem.setAttribute("aria-hidden", true);
  scrollerInner.appendChild(duplicateItem);
});

// SCROLL REVEAL
const para = document.querySelector(".index-scroll-reveal-desc");
let htmlString = '';

// Loop through each character in the text content
para.childNodes.forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {
        // If it's a text node, wrap each character in a <span>
        node.textContent.split('').forEach(char => {
            htmlString += `<span class="index-scroll-reveal-desc-span">${char}</span>`;
        });
    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'STRONG') {
        // If it's a <strong> element, wrap each character in a <strong>
        node.textContent.split('').forEach(char => {
            htmlString += `<strong class="index-scroll-reveal-desc-strong">${char}</strong>`;
        });
    }
});

para.innerHTML = htmlString;

const spans = [...document.querySelectorAll('.index-scroll-reveal-desc-span, .index-scroll-reveal-desc-strong')];

const revealFunc = () => {
    spans.forEach((span, index) => {
        let { top, left } = span.getBoundingClientRect();
        top = top - (window.innerHeight * 0.9); // Adjust scroll trigger point

        // Stagger effect using the span's index
        let staggerDelay = index * 0.005;

        // Calculate opacity based on scroll position and stagger delay
        let opacityVal = 1 - (top * 0.01 + left * 0.001) - staggerDelay;
        opacityVal = Math.max(0.1, Math.min(1, opacityVal)); // Clamp opacity between 0.1 and 1

        span.style.opacity = opacityVal;
    });
}

// PROGRESS BAR
const progressBar = document.querySelector(".index-accomplish-progress-bar");
const progressFunc = () => {
    const totalHeight = window.innerWidth > 600 ? 671 : window.innerWidth < 393 ? 400 : 510;
    const viewportHeight = window.innerHeight;
    // Get the current scroll position
    // const scrollPosition = window.scrollY;
    // Get the element's position relative to the viewport
    const {top} = progressBar.getBoundingClientRect();
    // Calculate progress percentage
    let progress = ((viewportHeight - top) / viewportHeight) * totalHeight;
    // Clamp the progress between 0 and totalHeight
    progress = Math.max(0, Math.min(progress, totalHeight));
    // Set the height of the progress bar
    progressBar.style.height = `${progress}px`;
}


// HOW SIMPLIFY PROGRESS BAR
const elementIsFullyVisibleInViewport = (el, partiallyVisible = false) => {
    const { top, left, bottom, right } = el.getBoundingClientRect();
    const { innerHeight, innerWidth } = window;
    return partiallyVisible
      ? ((top > 0 && top < innerHeight) ||
          (bottom > 0 && bottom < innerHeight)) &&
          ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
      : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

const howSimplifyContainer = document.querySelector(".index-how-simplify-container");
const progressBarSimplify = document.querySelector('.index-how-simplify-progress-bar');
const progressBarGlowImgSimplify = document.querySelector(".index-how-simplify-progress-glow-img");
const videos = document.querySelectorAll(".index-how-simplify-video-player");
const cards = document.querySelectorAll(".index-how-simplify-steps-content"); // Select all step cards
let currentVideoIndex = 0;
let totalDuration = 0;
let cumulativeTime = 0;
let progressPercent = 0;

function calculateTotalDuration() {
    totalDuration = 0;
    videos.forEach(video => {
        totalDuration += video.duration || 0;
    });
}

function updateProgressBar() {
    const currentVideo = videos[currentVideoIndex];
    const currentTime = currentVideo.currentTime;
    cumulativeTime = 0;

    for (let i = 0; i < currentVideoIndex; i++) {
        cumulativeTime += videos[i].duration || 0;
    }
    cumulativeTime += currentTime;

    // const progressPercent = (cumulativeTime / totalDuration) * 100;
    // progressBarGlowImgSimplify.style.left = `${progressPercent}%`;
    // progressBarSimplify.style.width = `${progressPercent}%`;

    progressPercent = (cumulativeTime / totalDuration) * 100;
    if (progressPercent > 100) progressPercent = 100; // Cap at 100%
    
    progressBarSimplify.style.width = `${progressPercent}%`;
    progressBarGlowImgSimplify.style.left = `${progressPercent}%`;
}

function switchToVideo(index) {
    videos.forEach((video, i) => {
        video.classList.remove('index-how-simplify-video-player-active');
        video.pause();
        video.currentTime = 0;
    });

    // Reset progress bar immediately if restarting from the beginning
    if (index === 0) {
        progressBarSimplify.style.width = '0%';
        progressBarGlowImgSimplify.style.left = '0px';
        cumulativeTime = 0; // Reset cumulative time
    }

    setTimeout(() => {
        currentVideoIndex = index;
        videos[currentVideoIndex].classList.add('index-how-simplify-video-player-active');
        videos[currentVideoIndex].play();
        updateProgressBar();
    }, 250);
}

cards.forEach((card, index) => {
    card.addEventListener('click', () => {
        switchToVideo(index);
    });
});

videos.forEach((video, index) => {
    video.addEventListener('loadedmetadata', calculateTotalDuration);
    video.addEventListener('timeupdate', updateProgressBar);
    video.addEventListener('ended', () => {
        currentVideoIndex = (currentVideoIndex + 1) % videos.length;
        switchToVideo(currentVideoIndex);
    });
});

const addAnimatedClass = () => {
    const { top } = howSimplifyContainer.getBoundingClientRect();
    if ((top < 400 && top > -900)) {
        videos[currentVideoIndex].play();
    }else{
        videos[currentVideoIndex].currentTime = 0;
        videos[currentVideoIndex].pause();
    }
};

// HOW SIMPLIFY STEPS CONTAINER 
const howContainer = document.querySelector(".index-how-container");
const howStepsContainer = document.querySelector(".index-how-simplify-steps-container");
const howStepsContent = document.querySelectorAll('.index-how-simplify-steps-content');
let translateEnabled = true;
let scrollPos = 0;

const isElementInViewport = (ele) => {
    const rect = ele.getBoundingClientRect();
    return rect.top <= 70 && rect.bottom > document.documentElement.clientHeight;
};

const translateWithScroll = () => {
    const isStickyContainerInViewport = isElementInViewport(howContainer);
    const {top} = howContainer.getBoundingClientRect();
    const currentScrollPos = window.scrollY;
    const direction = currentScrollPos > scrollPos ? "down" : "up";
    scrollPos = currentScrollPos;
    const lastContent = howStepsContent[howStepsContent.length - 1];
    howContainer.style.height = `${howStepsContainer.scrollWidth + 515}px`;

    if (!isStickyContainerInViewport) {
        return;
    } else {
        if(isElementInViewport(lastContent) && direction === "down"){
            translateEnabled = false;
            return;
        }else if(direction === "up" && top >= -30){
            translateEnabled = true;
            howStepsContainer.style.translate = `0 0`
        }
        if(top < -20 && translateEnabled){
            howStepsContainer.style.translate = `${top}px 0`
        }
    }
}

window.addEventListener('scroll',(e) => {
    const {top} = progressBar.getBoundingClientRect();
    if(window.innerWidth < 600) translateWithScroll();
    if(top < 940) progressFunc();
    revealFunc();
    addAnimatedClass();
})

// PRODUCTS TABS
const productsTabs = document.querySelectorAll('.index-products-tabbed-list-item');
const productsFeaturesContainer = document.querySelectorAll(".index-products-sub-container");
const featuresTabs = document.querySelectorAll('.index-products-sub-features-tabbed-list-item');
const featuresVideosContainer = document.querySelectorAll('.index-products-sub-features-video-container');
const featuresVideosHeaderHs = document.querySelectorAll('.index-products-sub-features-video-header-content-h');

productsTabs.forEach((tab) => {
    tab.addEventListener('click', (e) => {
        e.preventDefault();
        removeProductsTabActive();
        removeProductsFeaturesContainerActive();
        tab.classList.add('products-tab-active');
        productsFeaturesContainer.forEach((container) => {
            if(tab.firstElementChild.textContent === container.getAttribute('data-product-features')){
                container.classList.add('products-features-container-active');
            }
        })
    })
})

const removeProductsTabActive = () => {
    productsTabs.forEach((tab) => {
        tab.classList.remove('products-tab-active')
    })
}

const removeProductsFeaturesContainerActive = () => {
    productsFeaturesContainer.forEach((container) => {
        container.classList.remove('products-features-container-active')
    })
}

featuresTabs.forEach((tab) => {
    tab.addEventListener("click", (e) => {
        e.preventDefault();
        removeFeaturesTabActive(tab);
        removeFeaturesVideosContainerActive(tab);
        tab.classList.add('products-features-tab-list-item-active');
        featuresVideosHeaderHs.forEach(ele => {
            if(tab.lastElementChild.textContent === ele.textContent){
                ele.closest('.index-products-sub-features-video-container').classList.add('products-features-video-container-active');
            }
        })
    })
})

const removeFeaturesTabActive = (tab) => {
    tab.closest('.index-products-sub-features-tabbed-ul').querySelectorAll('.index-products-sub-features-tabbed-list-item').forEach(tab => {
        tab.classList.remove('products-features-tab-list-item-active');
    })
}

const removeFeaturesVideosContainerActive = (tab) => {
    tab.closest('.index-products-sub-features-container').querySelectorAll(".index-products-sub-features-video-container").forEach(container => {
        container.classList.remove('products-features-video-container-active');
    })
}

// FAQ
const accordionFlexContainer = document.querySelector(".index-faq-accordion-flex");
const accordions = document.querySelectorAll(".index-faq-accordion");
const accordionQuestionContainers = document.querySelectorAll(".index-faq-accordion-ques");
const accordionCloseImgs = document.querySelectorAll(".index-faq-accordion-ques-close-img");
const accordionAnswerContainers = document.querySelectorAll(".index-faq-accordion-answer")


accordionQuestionContainers.forEach(quesContainer => {
    quesContainer.addEventListener("click",(e) => {
        removeActiveClassCloseImg();
        e.currentTarget.lastElementChild.lastElementChild.classList.add("active-img")

        removeActiveClassAnswer();
        e.currentTarget.nextElementSibling.classList.add("active-answer-container")

        removeActiveClassAccordion();
        e.currentTarget.closest(".index-faq-accordion").classList.add(
            "active-accordion"
        )
    })
})

const removeActiveClassCloseImg = () => {
    accordionCloseImgs.forEach(img => {
        img.classList.remove("active-img")
    })
}

const removeActiveClassAnswer = () => {
    accordionAnswerContainers.forEach(answer => {
        answer.classList.remove("active-answer-container")
    })
}

const removeActiveClassAccordion = () => {
    accordions.forEach(accordion => {
        accordion.classList.remove("active-accordion");
    })
}