let currentIndex = 0; // Текущий индекс видимой карточки

const newsContainerEl = document.getElementById('news-container'); // Элемент контейнера для новостей
const cardsEls = document.querySelectorAll('#news-container .card'); // Все карточки новостей
const cardsElsLen = cardsEls.length - 1; // Индекс последней карточки
const btnScrollLEl = document.getElementById("btn-scroll-l"); // Кнопка для прокрутки влево
const btnScrollREl = document.getElementById("btn-scroll-r"); // Кнопка для прокрутки вправо
const gap = parseFloat(getComputedStyle(newsContainerEl).gap); // Ширина промежутка между карточками (в пикселях)


// Функция для прокрутки карточек влево
function scrollL() {
    if (currentIndex > 0) { // Если не первая карточка
        currentIndex--; // Уменьшить индекс
        updateNews(); // Обновить отображение
    }
}
  

// Функция для прокрутки карточек вправо
function scrollR() {
    if (currentIndex < cardsElsLen) { // Если не последняя карточка
        currentIndex++; // Увеличить индекс
        updateNews(); // Обновить отображение
    }
}


// Функция для обновления отображения карточек и кнопок
function updateNews() {
    // Обновление состояния кнопок прокрутки
    if (currentIndex == 0) {
        btnScrollLEl.classList.add('deactivated'); // Деактивировать кнопку влево, если это первая карточка
    } else if (currentIndex >= 0 && currentIndex < cardsElsLen) {
        btnScrollLEl.classList.remove('deactivated'); // Активировать кнопку влево
        btnScrollREl.classList.remove('deactivated'); // Активировать кнопку вправо
    } else if (currentIndex == cardsElsLen) {
        btnScrollREl.classList.add('deactivated'); // Деактивировать кнопку вправо, если это последняя карточка
    }

    // Обновление отображения карточек
    cardsEls.forEach((card, index) => {
      if (index < currentIndex) {
        // Смещение карточек, которые находятся слева от текущей\
        card.style.marginLeft = `-${card.offsetWidth + gap}px`;
      } else {
        // Восстановление нормального отображения для карточек, которые справа от текущей
        card.style.marginLeft = '0';
      }
    });
}