'use strict';

(() => {
  // === DOM & VARS =======
  const module = document.querySelector('.light-bulbs');
  const DOM = {
    lights: Array.from(module.querySelectorAll('img[alt="lightbulb"]')),
  };

  const LIGHT_PATH_ON = 'assets/img/light_on.png';
  const LIGHT_PATH_OFF = 'assets/img/light_off.png';

  //
  // === INIT =============
  const init = () => {
    // Eventlistener für jede Lampe
    DOM.lights.forEach((light) => {
      light.addEventListener('mouseenter', enterMouseLight);
    });

    turnAllLightsOff();
  };

  // === EVENTHANDLER =====
  const enterMouseLight = (e) => {
    // idx des aktuellen lichtes holen
    console.log(e.target);
    const idx = DOM.lights.indexOf(e.target);

    if (idx === -1) return;

    // nu alle lichter aus
    turnAllLightsOff();

    // mit den index das nächste licht einschalten oder das erste, wenn das letzte an ist
    if (idx === DOM.lights.length - 1) {
      DOM.lights[0].src = LIGHT_PATH_ON;
    } else {
      DOM.lights[idx + 1].src = LIGHT_PATH_ON;
    }
  };
  // === XHR/FETCH ========

  // === FUNCTIONS ========
  const turnAllLightsOff = () => {
    DOM.lights.forEach((light) => {
      light.src = LIGHT_PATH_OFF;
    });
  };
  init();
})();