// Mobile Height Event
function setScreenSize() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setScreenSize();

window.addEventListener("resize", setScreenSize);

// Common Event
function commonEvent() {
  let html = document.querySelector("html");
  let header = document.querySelector("header");
  let headerMenu = document.querySelector(".h_menu");
  let headerBurgerMenu = document.querySelector(".h_mobile__btn");
  let headerMenuList = document.querySelectorAll('.h_menu__li');

  if(header){
    // Menu Hover
    headerMenu.addEventListener('mouseover', isOver);
    headerMenu.addEventListener('mouseleave', isOut);
  
    function isOver(){
      header.setAttribute('header-hover', 'on');
    }
  
    function isOut(){
      header.removeAttribute('header-hover');
    }
  
    // List Hover
    headerMenuList.forEach((list) => {
      let subMenu = list.querySelector('.h_submenu');
  
      list.addEventListener('mouseover', function(){
        if(subMenu != null){
          header.classList.add('active');
          list.classList.add('on');
        }
      });
  
      list.addEventListener('mouseleave', function(){
        header.classList.remove('active');
        list.classList.remove('on');
      })
    })
  
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;
    let mobileWidth = 1200;
    let scrollPos = 0;
    let stickyPos = 0;
    let ticking = false;
    let linkToggle;
    let timer;
  
    window.addEventListener("scroll", scroll, false);
    window.addEventListener("resize", resize, false);
  
    // Run Immediately
    (headerAnimate = function () {
      windowWidth = window.innerWidth;
      windowHeight = window.innerHeight;
      scrollPos = window.scrollY || window.pageYOffset;
  
      animated();
  
      if (windowWidth > mobileWidth) {
        burgerMaker();
      }
    })();
  
    // Animated
    function animated() {
      sticky();
    }
  
    // Sticky
    function sticky() {
      let scrollPos = window.pageYOffset || document.documentElement.scrollTop;
  
      if (scrollPos > 0) {
        header.classList.add("header-scroll");
      } else {
        header.classList.remove("header-scroll");
      }
  
      stickyPos = scrollPos <= 0 ? 0 : scrollPos;
    }
  
    // Scroll Optimization
    function scroll() {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          call = "scroll";
          headerAnimate(call);
          ticking = false;
        });
      }
    }
    
    const langToggle = document.getElementById('langToggle');
  
    langToggle.addEventListener('click', function(e){
      e.stopPropagation();
      this.classList.toggle('open');
    })
  
    document.addEventListener('click', function(e){
      if(!e.target.closest('#langToggle')){
        langToggle.classList.remove('open');
      }
    })
  
    // Resize Optimization
    function resize() {
      clearTimeout(timer);
      timer = setTimeout(function () {
        timer = null;
        handle();
      }, 66);
    }
  
    function handle() {
      call = "resize";
      headerAnimate(call, windowWidth);
    }
  
    headerBurgerMenu.addEventListener("click", function () {
      burgerMaker(this);
    });
  
    function hideSubMenu() {
      linkToggle = document.querySelectorAll(".nav_menu__toggle");
      for (let i = 0; i < linkToggle.length; i++) {
        linkToggle[i].classList.remove("on");
      }
    }
  
    function clickSubMenu() {
      hideSubMenu();
      for (let i = 0; i < linkToggle.length; i++) {
        linkToggle[i].addEventListener("click", function () {
          if (this.classList.contains("on")) {
            hideSubMenu();
          } else {
            hideSubMenu();
            this.classList.add("on");
          }
        });
      }
    }
  
    clickSubMenu();
  
    function burgerMaker(e) {
      if (e === undefined || e.getAttribute("aria-pressed") === "true") {
        header.setAttribute("data-header-mobile", "off");
        header.classList.remove("mobileOn");
        headerBurgerMenu.setAttribute("aria-pressed", "false");
        hideSubMenu();
        html.style.overflow = "";
      } else {
        headerBurgerMenu.setAttribute("aria-pressed", "true");
        header.classList.add("mobileOn");
        header.setAttribute("data-header-mobile", "on");
        html.style.overflow = "hidden";
        linkToggle.forEach((link) => {
          link.addEventListener("click", function (e) {
            e.preventDefault();
          });
        });
      }
    }
  }

}