window.addEventListener('DOMContentLoaded', () => {
    console.log('Hello Freemason slider')

    const slider = function () {
        let slideIndex = 1
        let timer

        showSlides(slideIndex)

        const nextSlide = function () {
            showSlides(slideIndex += 1)
        }

        const previousSlide = function () {
            showSlides(slideIndex -= 1)
        }

        const currentSlide = function (index) {
            showSlides(slideIndex = index)
        }

        function showSlides(index) {
            let i;

            let slides = document.getElementsByClassName('js-hero-slider__slide')

            if (index > slides.length) {
                slideIndex = 1
            }

            if (index < 1) {
                slideIndex = slides.length
            }

            for (let slide of slides) {
                slide.style.display = "none";
            }

            slides[slideIndex - 1].style.display = 'flex'

            clearInterval(timer)
            timer = setInterval(() => {
                nextSlide()
            }, 5000);
        }

        // const nextBtn = document.getElementsByClassName('js-hero-slider__next-slide-btn')
        // if (nextBtn) {
        //     nextBtn[0].addEventListener('click', (e) => {
        //         nextSlide()
        //     })
        // }
        // const prevBtn = document.getElementsByClassName('js-hero-slider__prev-slide-btn')
        // if (prevBtn) {
        //     prevBtn[0].addEventListener('click', (e) => {
        //         previousSlide()
        //     })
        // }
        const dotnav = document.querySelectorAll('.js-dot-nav')
        if (dotnav) {
            dotnav.forEach(dot => {
                dot.addEventListener('click', e => {
                    let slideIndex = dot.dataset.slide_index
                    slideIndex++
                    currentSlide(slideIndex)
                })
            });
        }

    }

    window.addEventListener('elementor/frontend/init', () => {
        setTimeout(() => {
            const sliderEl = document.getElementsByClassName('js-hero-slider')
            if (sliderEl.length > 0) {
                let theHeroSlider = document.getElementById('js-hero-slider')
                theHeroSlider.classList.remove('jscss-hero-slider-not-active')
                slider()
            }
        }, 2500);
    })

})