'use strict';

(() => {
  // === DOM & VARS =======
  const module = document.querySelector('.newsboard') || console.error('newsboard not found');
  const DOM = {
    messageNumber: module.querySelector('.message_number'),
    newsboardContent: module.querySelector('.newsboard_content'),
    buttonNext: module.querySelector('.button-next'),
    buttonLast: module.querySelector('.button-last'),
    buttonPrev: module.querySelector('.button-prev'),
    buttonFirst: module.querySelector('.button-first'),
    progressBar: module.querySelector('.progressbar progress'),
  };

  console.log(DOM);

  // let currentMessageNumber = 1;

  // === INIT =============
  const init = () => {
    // Funktionaufrufe zu beginn der Anwendung
    initProgressbar();
    showMessageByNumber(1);
    showMessageNumber();

    // Eventlauscher zu beginn der Anwendung
    DOM.buttonNext.addEventListener('click', onClickNext);
    DOM.buttonPrev.addEventListener('click', onClickPrev);
    DOM.buttonFirst.addEventListener('click', onClickFirst);
    DOM.buttonLast.addEventListener('click', onClickLast);
    window.addEventListener('keyup', onKeyUp);
  };

  // === EVENTHANDLER =====
  const onKeyUp = (e) => {
    // Übung 8.3 && 8.4 Tastatursteuerung
    if (e.altKey && e.key === 'ArrowLeft') {
      onClickFirst();
    } else if (e.altKey && e.key === 'ArrowRight') {
      onClickLast();
    } else if (e.key === 'ArrowLeft') {
      onClickPrev();
    } else if (e.key === 'ArrowRight') {
      onClickNext();
    }
  };

  const onClickNext = (e) => {
    showMessageByNumber((DOM.progressBar.value += 1));
    // showMessageByNumber(++currentMessageNumber);
  };
  const onClickPrev = (e) => {
    showMessageByNumber((DOM.progressBar.value -= 1));
    // showMessageByNumber(--currentMessageNumber);
  };

  const onClickFirst = (e) => {
    showMessageByNumber((DOM.progressBar.value = 1));
    // showMessageByNumber((currentMessageNumber = 1));
  };

  const onClickLast = (e) => {
    showMessageByNumber((DOM.progressBar.value = MESSAGES.length));
    // showMessageByNumber((currentMessageNumber = MESSAGES.length));
  };
  // === XHR/FETCH ========

  // === FUNCTIONS ========
  const showMessageByNumber = (n) => {
    DOM.newsboardContent.innerHTML = MESSAGES[n - 1];
    updateNavigationButtons();
  };

  const showMessageNumber = () => {
    DOM.messageNumber.textContent = MESSAGES.length;
  };

  const initProgressbar = () => {
    DOM.progressBar.max = MESSAGES.length;
    DOM.progressBar.value = 1;
  };

  const updateNavigationButtons = () => {
    DOM.buttonPrev.disabled = DOM.buttonFirst.disabled = DOM.progressBar.value === 1;
    DOM.buttonNext.disabled = DOM.buttonLast.disabled = DOM.progressBar.value === MESSAGES.length;
  };

  init();
})();