'use strict';

(() => {
  const $ = (qs) => document.querySelector(qs);
  const $$ = (qs) => Array.from(document.querySelectorAll(qs));

  // === DOM & VARS =======
  const DOM = {
    // Alle Glühbirnen-Bilder auswählen
    bulbs: $$('.light-bulbs img'),
  };

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

  // Zähler
  let activeIndex = 0;

  // === INIT =============
  const init = () => {
    if (DOM.bulbs.length === 0) return;

    // zustand reseten
    updateLights(); // first bulb on

    DOM.bulbs.forEach((bulb, index) => {
      bulb.addEventListener('mouseenter', (e) => onBulbHover(e, index));

      bulb.addEventListener('click', onBulbClick);
    });
  };

  // === EVENTHANDLER =====

  const onBulbHover = (e, hoveredIndex) => {
    if (hoveredIndex === activeIndex) {
      nextLight();
    }
  };

  const onBulbClick = () => {
    nextLight();
  };

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

  const nextLight = () => {
    activeIndex++;

    if (activeIndex >= DOM.bulbs.length) {
      activeIndex = 0;
    }

    updateLights();
  };

  const updateLights = () => {
    DOM.bulbs.forEach((bulb, index) => {
      if (index === activeIndex) {
        bulb.src = LIGHT_PATH_ON;
      } else {
        bulb.src = LIGHT_PATH_OFF;
      }
    });
  };

  init();
})();