'use strict';

(() => {
  // === DOM & VARS =======
  const module = document.querySelector('.light-bulbs');
  const DOM = {
    lightBulbs: 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';

  // console.log(DOM);
  // === INIT =============
  const init = () => {
    setAllLightsOff();

    DOM.lightBulbs.forEach((el, idx) => {
      el.dataset.index = idx; // Index im HTMLImageElement ablegen (V1)
      el.addEventListener('mouseenter', (e) => onMouseEnter(e, idx)); // Index als zweiten Parameter mitgeben (V2)
    });
  };

  // === EVENTHANDLER =====
  const onMouseEnter = (e, idx) => {
    // const index = e.currentTarget.dataset.index;
    const img = e.currentTarget;
    const index = getIndexBy(img); // Index über Funktion ermitteln (V3)

    // if (e.currentTarget.src.includes(LIGHT_PATH_ON)) {
    const nextIndex = getNextIndex(index);

    console.log(nextIndex);
    setAllLightsOff();
    DOM.lightBulbs[nextIndex].src = LIGHT_PATH_ON;
    //
  };

  // === XHR/FETCH ========

  // === FUNCTIONS ========
  const getIndexBy = (img) => {
    return DOM.lightBulbs.indexOf(img);
  };
  const getNextIndex = (currentIndex) => {
    return currentIndex === DOM.lightBulbs.length - 1 ? 0 : currentIndex + 1;
  };

  const setAllLightsOff = () => {
    DOM.lightBulbs.forEach((el) => {
      el.src = LIGHT_PATH_OFF;
    });
  };

  init();
})();