// модуль для смены изображения в баннере по таймеру

import "./banner.css";

// указывается блок, в котором будет баннер
// блок должен содержать изображения
function myBanner(root) {
    console.info("Loaded");

    const banners = document.querySelectorAll("#banner > a > img"); //a > img.button-sm
    
    
    for (let i = 0; i < banners.length; i += 1) {
        banners[i].setAttribute("class", "banner-hide");
    }

    let old = banners.length - 1;
    let current = 0;

    // функция меняет изображения в цикле
    // изображение с классом banner-show будет показано
    // изображение с классом banner-hide будет скрыто
    // функция запускает таймер, который через 5 секунд
    // запускает функцию, снова создается таймер и т. д.
    
    function loop() {
        banners[current].setAttribute("class", "banner-show button-sm m-2 img-fluid ");
        banners[old].setAttribute("class", "banner-hide m-2");

        console.info("Banner changed");

        old = current;
        current += 1;

        if (current === banners.length) {
            current = 0;
        }

        setTimeout(loop, 5000);
    }

    loop();
}

export default myBanner;