'use strict';

(() => {
  // === DOM & VARS =======

  const module = document.querySelector('.light-bulbs') || console.warn('no light-bulbs to select');

  const DOM = {
    module,
    lights: module.querySelectorAll('img'),
  };

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

  // === INIT =============
  const init = () => {
    DOM.lights.forEach((img) => {
      img.addEventListener('mouseenter', bulbEnterVariant1b);
      // img.addEventListener('click', bulbEnterVariant1b);
    });
  };

  // === EVENTHANDLER =====
  // Das ist die korrekte Antwort nach Aufgaben Text, aktuelles Licht aus, nächstest Licht an
  const bulbEnterVariant1a = (e) => {
    const img = e.target;
    let nextImg = img.nextElementSibling;

    img.src = img.src.replace('light_on', 'light_off');

    if (!img.nextElementSibling) {
      nextImg = DOM.lights[0];
    }

    nextImg.src = nextImg.src.replace('light_off', 'light_on');
  };

  // das ist, denke ich, die WIRKLICH korrekte version, who alle anderen Lichter ausgeschaltet werden, ansonsten ist da nicht mehr viel mit "chasen"
  const bulbEnterVariant1b = (e) => {
    const imgEl = e.target;
    let nextImgEl = imgEl.nextElementSibling;

    if (!imgEl.nextElementSibling) {
      nextImgEl = DOM.lights[0];
    }

    DOM.lights.forEach((img) => {
      img.src = img === nextImgEl ? LIGHT_PATH_ON : LIGHT_PATH_OFF;
    });
  };

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

  // === FUNCTIONS ========

  init();
})();