import Swiper from "swiper";
import { Navigation } from "swiper/modules";

document.addEventListener("DOMContentLoaded", function () {
    // SWIPER
    const swiperConfig = {
        "swiper-homepage-news": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                1200: {
                    slidesPerView: 3,
                },
            },
        },
        "swiper-news": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            keyboard: {
                enabled: true
            },
            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                // when window width is >= 1200px
                1200: {
                    slidesPerView: 3,
                },
            },
        },
        "swiper-ranges": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                1200: {
                    slidesPerView: 3,
                    spaceBetween: 0,
                },
            },
        },
        "swiper-joinus": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        },
        "swiper-product-pictures": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            }
        },
        "swiper-other-products": {
            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1,
            spaceBetween: 60,
            // Navigation arrows
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                // when window width is >= 576px
                576: {
                    slidesPerView: 2,
                    spaceBetween: 0,
                },
            },
        },
    };
    type SwiperSlider = {
        element: HTMLElement;
        swiper: Swiper;
    };
    const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf<HTMLElement>,
        sliders: SwiperSlider[] = [];

    for (const htmlElt of swiperVol) {
        if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) {
            throw new Error(`Undefined swiper id ${htmlElt.id}`);
        }

        sliders.push({
            element: htmlElt,
            swiper: new Swiper(
                htmlElt,
                // @ts-ignore
                swiperConfig[htmlElt.id as keyof typeof swiperConfig]
            ),
        });
    }

    // GoToTop Button
    const backToTopBtn = document.getElementById("backtotop")as HTMLElement;
    window.onscroll = function () {
        if (
            document.body.scrollTop > 50 ||
			document.documentElement.scrollTop > 50
        ) {
            backToTopBtn.style.display = "flex";
        } else {
            backToTopBtn.style.display = "none";
        }
    };
    backToTopBtn.addEventListener("click", function () {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    });

    // * Toggle la dropdown Arrow du select.
    if (document.querySelector("section.contact") || document.querySelector("section.joinus")) {
        const contactFormSelectList = document.querySelectorAll("select") as NodeListOf<HTMLSelectElement>;
        document.body.addEventListener("click", function (e: MouseEvent) {
            const target = e.target as HTMLElement | null;
            contactFormSelectList.forEach(select => {
                if (select.contains(target)) {
                    select.parentElement!.classList.toggle("active");
                } else {
                    select.parentElement!.classList.remove("active");
                }
            });
        });
    }
});