/**
 * Gyártók oldal carousel (körhinta) funkciók
 *
 * Ez a script felelős a gyártók oldalán található vízszintes görgethető kártya-listák
 * működéséért. Bal és jobb nyilakkal lehet görgetni a gyártók között.
 *
 * Funkciók:
 * - Bal/jobb nyilakkal görgető kártyák
 * - Nyilak automatikus letiltása, ha nincs több tartalom
 * - Smooth (sima) animált görgetés
 *
 * FONTOS: Ez a script HTML5/CSS3 oktatáshoz nem szükséges, csak a jobb
 * felhasználói élmény érdekében került bele.
 */

// Várjuk meg, amíg a HTML teljes betöltődik
document.addEventListener('DOMContentLoaded', function() {
  // ========== ÖSSZES CAROUSEL ELEM KIVÁLASZTÁSA ==========
  // Lehet több carousel is az oldalon (CPU gyártók, GPU gyártók, stb.)
  const carouselWrappers = document.querySelectorAll('.carousel-wrapper');

  // ========== MINDEN CAROUSEL INICIALIZÁLÁSA ==========
  // forEach: végigmegyünk minden carousel wrapper elemen
  carouselWrappers.forEach(wrapper => {
    // Elem kiválasztás a wrapper-en belül
    const carousel = wrapper.querySelector('.manufacturer-carousel');  // Görgethető tartalom
    const leftArrow = wrapper.querySelector('.carousel-arrow-left');   // Bal nyíl gomb
    const rightArrow = wrapper.querySelector('.carousel-arrow-right'); // Jobb nyíl gomb

    // Ha valamelyik elem hiányzik, ugorjuk át ezt a carousel-t
    if (!carousel || !leftArrow || !rightArrow) return;

    // ========== GÖRGETÉS MÉRTÉKE ==========
    // Egy kártyányi távolság (kártya szélesség + rés)
    const scrollAmount = 296; // 280px kártya szélesség + 16px rés

    // ========== NYÍL GOMBOK ÁLLAPOTÁNAK FRISSÍTÉSE ==========
    // Ez a függvény letiltja a nyilakat, ha nincs több tartalom abba az irányba
    function updateArrows() {
      // scrollLeft: mennyit görgettünk balra (pixel)
      const scrollLeft = carousel.scrollLeft;

      // scrollWidth: teljes tartalom szélessége
      // clientWidth: látható rész szélessége
      // maxScroll: maximum mennyit lehet görgetni
      const maxScroll = carousel.scrollWidth - carousel.clientWidth;

      // Bal nyíl letiltása, ha a legelején vagyunk
      leftArrow.disabled = scrollLeft <= 0;

      // Jobb nyíl letiltása, ha a legvégén vagyunk (1px tűréshatár)
      rightArrow.disabled = scrollLeft >= maxScroll - 1;
    }

    // ========== BAL NYÍL KATTINTÁS ==========
    // Arrow function: rövidebb szintaxis függvényhez
    leftArrow.addEventListener('click', () => {
      // scrollBy: viszonylagos görgetés (nem abszolút pozíció)
      carousel.scrollBy({
        left: -scrollAmount,    // Negatív = balra görgetés
        behavior: 'smooth'      // Animált, sima görgetés (nem ugrás)
      });
    });

    // ========== JOBB NYÍL KATTINTÁS ==========
    rightArrow.addEventListener('click', () => {
      carousel.scrollBy({
        left: scrollAmount,     // Pozitív = jobbra görgetés
        behavior: 'smooth'
      });
    });

    // ========== GÖRGETÉS FIGYELÉSE ==========
    // Minden görgetés után frissítjük a nyilak állapotát
    // (Működik egérrel, touchpad-del és a nyilakkal is)
    carousel.addEventListener('scroll', updateArrows);

    // ========== KEZDETI ÁLLAPOT BEÁLLÍTÁSA ==========
    // Oldal betöltésekor is frissítjük a nyilakat
    updateArrows();

    // ========== ABLAK ÁTMÉRETEZÉS FIGYELÉSE ==========
    // Ha az ablak átméreteződik, újra ellenőrizzük a nyilakat
    window.addEventListener('resize', updateArrows);
  });
});
