"use strict";

//####################//
// CLASS MENU CONTROL //
//####################//
// class MenuControl {
//   constructor(obj) {
//     this.ctrlBtn = obj.controlButton;
//     this.showNavStyle = obj.classNameShowNav;
//     this.skipNavStyle = obj.classNameSkipNav;
//     this.evaseFocusElement = obj.evasiveFocusElement;

//     // Menus controlled by control button
//     this.targetMenuAttr;
//     this.currentMenuAttr;

//     try {
//       this.checkEntries();
//       this.getMenus();
//       this.setButtonEvent();
//     } catch (error) {
//       console.error(error.message);
//     }
//   }

//   checkEntries() {
//     if (!this.ctrlBtn) {
//       throw new Error(
//         "Menu Control error. Control Button is missing! Expected Value {controlButton: value}"
//       );
//     }
//     if (!this.showNavStyle) {
//       throw new Error(
//         "Menu Control error. CSS class for showing nav is missing! Expected Value {classNameShowNav: value}"
//       );
//     }
//     if (!this.skipNavStyle) {
//       throw new Error(
//         "Menu Control error. CSS class for showing nav is missing! Expected Value {classNameSkipNav: value}"
//       );
//     }
//     if (typeof this.showNavStyle !== "string") {
//       throw new Error("Menu Control error. CSS class for showing nav is not type of string");
//     }
//     if (typeof this.skipNavStyle !== "string") {
//       throw new Error("Menu Control error. CSS class for showing nav is not type of string");
//     }
//   }

//   getMenus() {
//     this.targetMenuAttr = this.ctrlBtn.getAttribute("aria-controls");
//     this.currentMenuAttr = this.ctrlBtn.getAttribute("data-current-menu");

//     if (!this.targetMenuAttr) {
//       throw new Error(
//         "Menu Control error. Target Menu is missing! Check for following inline attribute: aria-controls='target-menu'"
//       );
//     }

//     if (!this.currentMenuAttr) {
//       throw new Error(
//         "Menu Control error. Curent Menu is missing! Check for following inline attribute: data-current-menu='current-menu'"
//       );
//     }
//   }

//   setButtonEvent() {
//     this.ctrlBtn.addEventListener("click", this.changeMenu.bind(this));
//   }

//   changeMenu() {
//     const currentMenu = document.querySelector(`#${this.currentMenuAttr}`);
//     const targetMenu = document.querySelector(`#${this.targetMenuAttr}`);
//     const moveToUpperMenu = targetMenu.classList.contains(this.skipNavStyle);

//     this.evaseFocusElement.focus();

//     targetMenu.hidden = false;

//     if (moveToUpperMenu) {
//       currentMenu.classList.remove(this.showNavStyle);

//       targetMenu.classList.remove(this.skipNavStyle);
//       targetMenu.classList.add(this.showNavStyle);

//       const previousButton = document.querySelector(
//         `button[aria-controls="${this.currentMenuAttr}"]`
//       );

//       if (previousButton) {
//         previousButton.setAttribute("aria-expanded", "false");
//       }
//     } else {
//       currentMenu.classList.add(this.skipNavStyle);
//       currentMenu.classList.remove(this.showNavStyle);

//       targetMenu.classList.add(this.showNavStyle);

//       if (this.ctrlBtn.hasAttribute("aria-expanded")) {
//         this.ctrlBtn.setAttribute("aria-expanded", "true");
//       }
//     }

//     setTimeout(() => {
//       currentMenu.hidden = true;
//     }, 500);
//   }
// }

// Menu Button Open/Close Nav wrapper
{
  const qs = (el) => document.querySelector(el);
	const qsAll = (el) => document.querySelectorAll(el);
  // Menu Button and Layer
  const menuButton = qs(".header-section__menu-button");
  const topLine = qs(".header-section__menu-button-top-line");
  const middleLine = qs(".header-section__menu-button-middle-line");
  const bottomLine = qs(".header-section__menu-button-bottom-line");
  // Header Bar
  const header = qs(".header-section__header");
  const logo = qs(".header-section__logo");
  const phone = qs(".header-section__phone-icon-green");
  const number = qs(".header-section__phone-number-text-green");
  const verticalLine = qs(".vertical-line-green");
  const ctaBtn = qs(".header-section__cta-text-green");
  const cutlery = qsAll(".header-section__menu-button-cutlery-green");
  const logoFrame = qsAll(".logo-frame");
  const logoText = qsAll(".logo-text");
  const logoFrameMenuOpen = "logo-frame--menu-open";
  const logoTextMenuOpen = "logo-text--menu-open";
  const hideLogo = "header-section__logo--hide";
  const hideLogoMinWidth = 767;
  const headerBgColor = "header-section__header--bg-color-change";
  // Main Menu
  const mainMenu = qs("#main-menu");
  // Menu wrapper
  const activeStylingTarget = "header-section__nav-wrapper--slide-in";
  const activeStylingTargetContent = "header-section__nav--fade-in";
  const preventScrolling = "prevent-scrolling";
  // Body and Body content
  const body = qs("body");
  const content = qs(".main-content");
  const contentLiteBg = qs(".home-content");
  const footer = qs(".footer-section");
  // Scrollbar and Timeout
  let scrollbarWidth = getScrollbarWidth();
  let timeoutInstance;

  function getScrollbarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
  }

  window.addEventListener("resize", function () {
    scrollbarWidth = getScrollbarWidth();
    toggleLogo();
  });

  // Clear Timeout which is used to set hidden attr. after transition is finished
  function resetTimeout(){
    if (timeoutInstance) {
      clearTimeout(timeoutInstance);
      timeoutInstance = "";
    }
  }

  function showMenu(target, targetContent){
    try {
      // Menu Wrapper which slides down/up
      if(target) {
        // first set hidden attr.
        target.hidden = false;
        // then styling because of transition
        target.classList.add(activeStylingTarget);
      }
      // Menu Content which toggles opacity to show/hide
      if(targetContent){
        targetContent.classList.add(activeStylingTargetContent)
      }
      // Remove hidden attr. of Main Menu
      if(mainMenu){
        mainMenu.hidden = false;
      }
    } catch (error) {
      console.log(error);
    }
  }

  function hideMenu(target, targetContent){
    try {
      // Menu Wrapper which slides down/up
      if(target) {
        // Remove class first
        target.classList.remove(activeStylingTarget);
        // Then hidden attribute is set after timeout because of 500ms transition
        timeoutInstance = setTimeout(() => {
          target.hidden = true;
          // add hidden attr. to Main Menu
          if(mainMenu){
              mainMenu.hidden = true;
          }
        }, 500);
      }
      // Menu Content which toggles opacity to show/hide
      if(targetContent){
          targetContent.classList.remove(activeStylingTargetContent)
      }
    } catch (error) {
        console.log(error);
    }
  }

  function disableContentFromTabbing(){
    if(content) content.inert = true;
    if(contentLiteBg) contentLiteBg.inert = true;
    if(footer) footer.inert = true;
  }

  function enableContentForTabbing(){
    if(content) content.inert = false;
    if(contentLiteBg) contentLiteBg.inert = false;
    if(footer) footer.inert = false;
  }

  function hideScrollbar(){
    menuButton.style.marginRight = `${scrollbarWidth}px`;
    body.classList.add(preventScrolling);
  }

  function showScrollbar(){
    body.classList.remove(preventScrolling);
    menuButton.style.marginRight = "0px";
  }

  function toggleLogo() {
    try {
      const target = qs(`#${menuButton.getAttribute("aria-controls")}`);
      //Menu is shown
      if (target && target.classList.contains(activeStylingTarget)) {
        // Window width is big enough to hide logo
        if (window.innerWidth > hideLogoMinWidth && !logo.classList.contains(hideLogo)) {
          logo.classList.add(hideLogo);
        // Window width is small enough to show logo
        } else if (window.innerWidth <= hideLogoMinWidth && logo.classList.contains(hideLogo)) {
          logo.classList.remove(hideLogo);
        }
      // Menu is hidden
      } else if (target && !target.classList.contains(activeStylingTarget)) {
        // Always show logo whe menu is hidden
        if (logo.classList.contains(hideLogo)) {
          logo.classList.remove(hideLogo);
        }
      }
    } catch (error) {
      console.log(error);
    }
  }

  function setStylingForMenuState(){
    // Menu Button (cutlery)
    topLine.classList.toggle("header-section__menu-button-top-line--move");
    middleLine.classList.toggle("header-section__menu-button-middle-line--move");
    bottomLine.classList.toggle("header-section__menu-button-bottom-line--move");
    // BG color for header
    header.classList.toggle(headerBgColor);
    if(logoFrame){
      logoFrame.forEach((el) => {
      	el.classList.toggle(logoFrameMenuOpen);
      });
    }
    if(logoText){
      logoText.forEach((el) => {
      	el.classList.toggle(logoTextMenuOpen);
      });
    }
    if(phone) phone.classList.toggle("nav-open");
    if(number) number.classList.toggle("nav-open");
    if(verticalLine) verticalLine.classList.toggle("vertical-line---active");
    if(ctaBtn) ctaBtn.classList.add("header-content-slim");
    if(cutlery){
      cutlery.forEach((el) => {
        el.classList.toggle("nav-open");
      });
    }
  }

  menuButton.addEventListener("click", function () {
    const target = qs(`#${this.getAttribute("aria-controls")}`);
    const targetContent = target.children[0];
    if (target && !target.classList.contains(activeStylingTarget)) {
      resetTimeout();
      showMenu(target, targetContent);
      hideScrollbar();
      disableContentFromTabbing()
    } else if (target && target.classList.contains(activeStylingTarget)) {
      hideMenu(target, targetContent);
      showScrollbar();            
      enableContentForTabbing();
    }
    toggleLogo();
    setStylingForMenuState();
  });
}

// Definition Menu control class
// {
//   const basicOption = {
//     evasiveFocusElement: document.querySelector(".header-section__nav-meta-cta-btn"),
//     classNameShowNav: "header-section__nav-menu--show",
//     classNameSkipNav: "header-section__nav-menu--skip",
//   };

//   const qsAll = (el) => document.querySelectorAll(el);
//   const ctrlBtns = qsAll('.header-section__nav-menu-item[aria-controls]');
//   const backBtns = qsAll('.header-section__nav-sub-menu-back-button[data-current-menu]');

//   if(ctrlBtns) {
//     ctrlBtns.forEach((btn) => {
//       new MenuControl({
//         ...basicOption,
//         controlButton: btn,
//       });
//     })
//   }

//   if(backBtns) {
//     backBtns.forEach((btn) => {
//       new MenuControl({
//         ...basicOption,
//         controlButton: btn,
//       });
//     })
//   }
// }

// Shrink Header height and change Header BG color when user scrolls
{
	const qs = (el) => document.querySelector(el);
	const qsAll = (el) => document.querySelectorAll(el);
  const header = qs(".header-section__header");
  const logo = qs(".header-section__logo-wrapper");
  const logoFrame = qsAll(".logo-frame");
  const logoText = qsAll(".logo-text");
  const phone = qs(".header-section__phone-icon-green");
  const number = qs(".header-section__phone-number-text-green");
  const verticalLine = qs(".vertical-line-green");
  const ctaBtn = qs(".header-section__cta-text-green");
  const cutlery = qsAll(".header-section__menu-button-cutlery-green")
  const bgColor = "header-section__header--slim";
  const logoSlim = "header-section__logo-wrapper--slim";
  const logoFrameSlim = "logo-frame--slim";
  const logoTextSlim = "logo-text--slim";
  const scrollPos = 0;

  function shrinkHeader(){
    if (window.scrollY > scrollPos && !header.classList.contains(bgColor) && !logo.classList.contains(logoSlim)) {

      header.classList.add(bgColor);
      logo.classList.add(logoSlim);

      if(phone) phone.classList.add("header-content-slim");
      if(number) number.classList.add("header-content-slim");
      if(verticalLine) verticalLine.classList.add("vertical-line-slim");
      if(ctaBtn) ctaBtn.classList.add("header-content-slim");

      if(logoFrame){
        logoFrame.forEach((el) => {
          el.classList.add(logoFrameSlim);
        });
      }

      if(logoText){
        logoText.forEach((el) => {
          el.classList.add(logoTextSlim);
        });
      }

      if(cutlery){
        cutlery.forEach((el) => {
          el.classList.add("header-content-slim");
        });
      }

    } else if (window.scrollY === scrollPos && header.classList.contains(bgColor) && logo.classList.contains(logoSlim)) {

      header.classList.remove(bgColor);
      logo.classList.remove(logoSlim);

      if(phone) phone.classList.remove("header-content-slim");
      if(number) number.classList.remove("header-content-slim");
      if(verticalLine) verticalLine.classList.remove("vertical-line-slim");
      if(ctaBtn) ctaBtn.classList.remove("header-content-slim");

      if(logoFrame){
        logoFrame.forEach((el) => {
          el.classList.remove(logoFrameSlim);
        });
      }

      if(logoText){
        logoText.forEach((el) => {
          el.classList.remove(logoTextSlim);
        });
      }

      if(cutlery){
        cutlery.forEach((el) => {
          el.classList.remove("header-content-slim");
        });
      }
    }
  }

  shrinkHeader();

  window.addEventListener("scroll", shrinkHeader);
}

// Change title text when window is blurred
{
    const titleTag = document.querySelector("title");
    const focusTitle = titleTag.textContent;
    const blurTitle = "Wir servieren Gänsehaut!";

    window.addEventListener("blur", function(){
        titleTag.textContent = blurTitle;
    });
    window.addEventListener("focus", function(){
        titleTag.textContent = focusTitle;
    });
};

// Countdown Silvesterball
{
  // Adds "0" for one digit numbers
  function formatNumber(num) {
    return num.toString().padStart(2, "0");
  }
  
  document.addEventListener("DOMContentLoaded", function () {
    // Define Target Date for Event
    const targetYear = new Date().getFullYear();
    const targetMonth = 12; // Month
    const targetDay = 31;   // Day
    const targetHour = 18;  // Hour
    const targetMin = 0;    // Minute
    const targetSec = 0;    // Second

    // Define Starting Date for Countdown
    const startYear = new Date().getFullYear();
    const startMonth = 10;   // Month
    const startDay = 30;     // Day
    const startHour = 6;    // Hour
    const startMin = 30;     // Minute
    const startSec = 0;     // Second
    
    // Selector function
    const qs = (el) => document.querySelector(el);
    // WHOLE COUNTDOWN WRAPPER
    const countdownWrapper = qs(".silvesterball-countdown-wrapper");
    // COUNTDOWN CONTAINER (OPEN INFO BOX BUTTON)
    const countdownBtn = qs(".silvesterball-countdown-button");
    // TEXT CONTAINER FOR REMAINING DAYS
    const daysRemain = qs("#days-remaining");
    // TEXT CONTAINER FOR REMAINING HOURS
    const hoursRemain = qs("#hours-remaining");
    // TEXT CONTAINER FOR REMAINING MINUTES
    const minutesRemain = qs("#minutes-remaining");
    // TEXT CONTAINER FOR REMAINING SECONDS
    const secondsRemain = qs("#seconds-remaining");

    // Check for empty variables
    const elements = [countdownWrapper, countdownBtn, daysRemain, hoursRemain, minutesRemain, secondsRemain];

    if (elements.some(el => !el)) {
      return;
    }

    setTimeout(() => {
      // === KONFIGURATION FOR TARGET DATE ===
      const targetDate = new Date(`${targetYear}-${formatNumber(targetMonth)}-${formatNumber(targetDay)}T${formatNumber(targetHour)}:${formatNumber(targetMin)}:${formatNumber(targetSec)}+01:00`);
      // === KONFIGURATION FOR START DATE ===
      const startDate = new Date(`${startYear}-${formatNumber(startMonth)}-${formatNumber(startDay)}T${formatNumber(startHour)}:${formatNumber(startMin)}:${formatNumber(startSec)}+01:00`);

      function updateCountdown() {
        const now = new Date();

        // START DATE NOT REACHED
        if (now < startDate) {
          countdownWrapper.hidden = true;
          countdownWrapper.style.display = "none";
          return;
        }

        // TARGET DATE PASSED
        const diff = targetDate - now;
        if (diff <= 0) {
          countdownWrapper.hidden = true;
          countdownWrapper.style.display = "none";
          clearInterval(interval);
          return;
        }

        if(countdownWrapper.hidden === true) {
          countdownWrapper.hidden = false;
          countdownWrapper.style.display = "block";
        };

        if(getComputedStyle(countdownBtn).animationPlayState === "paused") {
          countdownBtn.style.animationPlayState = "running";
        };

        // CALCULATION
        const totalSeconds = Math.floor(diff / 1000);
        const days = Math.floor(totalSeconds / (3600 * 24));
        const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        const totalHours = Math.floor(totalSeconds / 3600);
        daysRemain.textContent = formatNumber(days);
        hoursRemain.textContent = formatNumber(hours);
        minutesRemain.textContent = formatNumber(minutes);
        secondsRemain.textContent = formatNumber(seconds);
      }

      const interval = setInterval(updateCountdown, 1000);
      updateCountdown();
    }, 7000)
  });
}

// Open Info Box for Countdown Silvesterball
{
  document.addEventListener("DOMContentLoaded", () => {
    // Selector function
    const qs = (el) => document.querySelector(el);
    const openBtn = qs(".silvesterball-countdown-button");
    const closeBtn = qs(".silvesterball-countdown__info-box-close-button");
    const infoBox = qs(".silvesterball-countdown__info-box-wrapper");

    // Check for empty variables
    const elements = [openBtn, closeBtn, infoBox];

    if (elements.some(el => !el)) {
      return;
    }

    function toggleInfoBox() {
      const isHidden = infoBox.hidden === true;

      infoBox.hidden = !isHidden;
      openBtn.setAttribute("aria-expanded", String(isHidden));
    }

    openBtn.addEventListener("click", toggleInfoBox);
    closeBtn.addEventListener("click", toggleInfoBox);
  });
}

// Update Date in Footer
(function updateYearInFooter() {
  const currYear = new Date().getFullYear();
  const dateInfoBox = document.querySelector("#date-ball");
  const footerDate = document.querySelector("#date");
  if(footerDate != undefined) footerDate.textContent = currYear;
  if(dateInfoBox != undefined) dateInfoBox.textContent = currYear;
})()