const html = document.querySelector("html");
const header = document.querySelector("header");

let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let mobileWidth = 1200;
let scrollPos = 0;
let stickyPos = 0;
let ticking = false;
let timeout;
let burgerMenu = document.querySelector(".h_mobile__btn");
let linkToggle;
let delay = 300;
let timer;

// Common Header
function headerEvent(){
  
  // 새로 고침 시 최상단으로
  // $("html, body").animate({ scrollTop: 0 }, "fast"); 

  window.addEventListener('scroll', scroll, false);
  window.addEventListener("resize", resize, false);

  (headerAnimate = function(call){
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
    scrollPos = window.scrollY || window.pageYOffset;

    animated();

    if (windowWidth > mobileWidth) {
      header.setAttribute('data-header-mobile','off');
      burgerMenu.setAttribute('aria-pressed','false');
      // burgerMarker();
    }

    if(call === undefined){
      // initialized();
    } else if(call === 'scroll'){
      // scrolled();
    } else if(call === 'resize'){
      // resized();
    }
  })();

  function animated(){
    // scrollTop();
    sticky();
  }

  function resize(){
    clearTimeout(timer);
    timer = setTimeout(function () {
      timer = null;
      handle();
    }, 66);
  }

  function handle() {
    call = "resize";
    headerAnimate(call, windowWidth);
  }

  function scroll(){
    // 조건문 실행 - 초기 변수가 참인지 거짓인지 판단 후 변환
    if(!ticking){
      window.requestAnimationFrame(() => {
        call = 'scroll';
        headerAnimate(call);
        ticking = false;
      });
      ticking = true;
    }
  }

  function sticky(){
    let scrollPos = window.pageYOffset || document.documentElement.scrollTop;

    if(scrollPos > stickyPos){
      header.setAttribute('data-header', 'sticky');
    } else {
      header.removeAttribute('data-header');
    }
    
    if(scrollPos> 0){
      header.classList.add('active');
    } else {
      header.classList.remove('active');
    }
    
    // 조건문 실행 후 변수 재설정 하여 조건문 재실행
    stickyPos = scrollPos <= 0 ? 0 : scrollPos;


    // AOS Event Scroll
    AOS.init({
      // offset: 300,
      duration:800,
      easing: 'ease',
      once: true,
    });
  }

  // PC Menu Action
  function hoverAction(){
    header.addEventListener('mouseenter', function(){
      header.classList.add('header-active');
    });

    header.addEventListener('mouseleave', function(){
      header.classList.remove('header-active');
    });

    let menuLists= document.querySelectorAll('.h_menu__list');

    menuLists.forEach((list) => {
      let submenu = list.querySelector(".h_submenu");

      if (submenu) {
        list.addEventListener("mouseenter", function () {
          menuLists.forEach((current) => {
            current.classList.remove("menu-active");
          });

          list.classList.add("menu-active");
        });

        list.addEventListener("mouseleave", function () {
          list.classList.remove("menu-active");
        });
      }
    });
    
    
    let menuLink = document.querySelectorAll(".menu-on");
    let menuListWrap = document.querySelector('.h_menu');
    
    for(let i = 0; i < menuLink.length; i++) {
      menuLink[i].addEventListener("mouseenter",function(){
        menuListWrap.classList.add('menu-on');
      });
      menuLink[i].addEventListener("mouseleave",function(){
        menuListWrap.classList.remove('menu-on');
      });
    }
  }
  hoverAction();

  // Mobile Menu Action
  function mobileAction(){
    let linkToggle;


    function hideSubMenu() {
      linkToggle = document.querySelectorAll(".h-menu-toggle");
      for (let i = 0; i < linkToggle.length; i++) {
        linkToggle[i].setAttribute("data-menu-link", "false");
      }
    }
  
    function clickSubMenu() {
      hideSubMenu();
      for (let i = 0; i < linkToggle.length; i++) {
        linkToggle[i].addEventListener("click", function () {
          if (this.getAttribute("data-menu-link") === "true") {
            hideSubMenu();
          } else {
            hideSubMenu();
            this.setAttribute("data-menu-link", "true");
          }
        });
      }
    }
    clickSubMenu();

    function burgerMarker(e){
      if(e === undefined || e.getAttribute('aria-pressed') === 'true'){
        header.setAttribute('data-header-mobile','off');
        burgerMenu.setAttribute('aria-pressed','false');
        // hideSubMenu();
        html.style.overflow = "";
      } else {
        e.setAttribute('aria-pressed','true');
        header.setAttribute('data-header-mobile','on');
        html.style.overflow = "hidden";
        linkToggle.forEach((link) => {
          link.addEventListener("click", function (event) {
            event.preventDefault();
          });
        });
      }
    }

    burgerMenu.addEventListener('click', function(){
      burgerMarker(this);
    });
  }
  mobileAction();
}

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

setScreenSize();

// 개인정보처리방침 모달
function privacyModalEvent(){
  let modalBtn01 = document.getElementById('privacyBtn');
  let modalBtn02 = document.getElementById('termsBtn');
  let modal01 = document.getElementById('privacyModal');
  let modal02 = document.getElementById('termsModal');
  
  if(modal01) {
    let modalClose = document.querySelector('#privacyModal .close--modal');
    let modalCloseBg = document.querySelector('#privacyModal .modal-bg');
    
    modalBtn01.addEventListener('click',function(){
      modal01.classList.add('open')
    });

    modalClose.addEventListener('click',function(){
      modal01.classList.remove('open')
    });
    
    modalCloseBg.addEventListener('click',function(){
      modal01.classList.remove('open')
    });
    
  }
  
  if(modal02) {
    let modalClose = document.querySelector('#termsModal .close--modal');
    let modalCloseBg = document.querySelector('#termsModal .modal-bg');
    
    modalBtn02.addEventListener('click',function(){
      modal02.classList.add('open')
    });
    
    modalClose.addEventListener('click',function(){
      modal02.classList.remove('open')
    });
    
    modalCloseBg.addEventListener('click',function(){
      modal02.classList.remove('open')
    });
    
  }
  
}



function aboutEvent() {
  gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

  const history = document.querySelector('.history');

  if (history) {
    // historyProgress는 progress의 높이를 스크롤에 따라 변화시킴
    let historyProgress = gsap.timeline({
      scrollTrigger: {
        trigger: ".his-line",
        start: "-10% 65%",
        end: "bottom 95% center",
        scrub: true,
        // markers: true,
      }
    })
    .from(".progress", { height: 0, ease: "none" });

    // 각 dot을 선택
    let dots = document.querySelectorAll('.history .dot');

    // 각 dot에 대해 ScrollTrigger 설정 (for문 사용)
    for (let i = 0; i < dots.length; i++) {
      let dot = dots[i]; // 현재 dot
      gsap.to(dot, {
        scrollTrigger: {
          trigger: dot,
          start: "top 90.8%", // dot가 화면의 75%에 도달했을 때
          end: "top 25%", // dot가 화면의 25%에 도달했을 때
          onEnter: () => {
            dot.classList.add('active'); // 화면에 진입할 때 active 클래스 추가
          },
          onLeaveBack: () => {
            dot.classList.remove('active'); // 화면을 벗어날 때 active 클래스 제거
          },
          // markers: true, 
          scrub: true,
        }
      });
    }
  }
}

function patentEvent(){
  const patent = document.querySelector('.patent');
  
  if(patent) {
    let tabBtn = document.querySelectorAll('.tab-item');
    let tabCon = document.querySelectorAll('.list');
    
    for(let i = 0; i < tabBtn.length; i++){
      tabBtn[i].addEventListener('click',function(){
        for(let j = 0; j < tabBtn.length; j++){
          tabBtn[j].classList.remove('on');
          tabCon[j].classList.remove('on');
        }
        tabBtn[i].classList.add('on');
        tabCon[i].classList.add('on');
      })
    }

    
    let options = {
      slidesPerView:1,
      spaceBetween:10,
      // loop: true,
      observer: true,
      observeParents: true,
      
      navigation: {
        nextEl: ".swiper-control .next",
        prevEl: ".swiper-control .prev",
      },
      
      pagination: {
        el: ".bbs-modal-patent.kr .patent-pagination",
        type: "progressbar",
      },
    }
  
    const patentSlider = new Swiper('.bbs-modal-patent.kr .swiper-container', options);

    let options2 = {
      slidesPerView:1,
      spaceBetween:10,
      // loop: true,
      observer: true,
      observeParents: true,
      
      navigation: {
        nextEl: ".swiper-control .next",
        prevEl: ".swiper-control .prev",
      },
      
      pagination: {
        el: ".bbs-modal-patent.en .patent-pagination",
        type: "progressbar",
      },
    }
  
    const patentSlider2 = new Swiper('.bbs-modal-patent.en .swiper-container', options2);
    
    
    // 리스트 클릭 시 모달창 오픈
    let tabItemKR = document.querySelectorAll('.list01 li');
    let tabItemEN = document.querySelectorAll('.list02 li');

    let modalKR = document.querySelector('.bbs-modal-patent.kr');
    let modalEN = document.querySelector('.bbs-modal-patent.en');

    
    // 국문 리스트 클릭 시 국문 모달창 오픈
    tabItemKR.forEach(item => {
      item.addEventListener('click', () => {
        modalKR.classList.add('open');
        html.classList.add('no-scroll');
      });
    });

    // 영문 리스트 클릭 시 영문 모달창 오픈
    tabItemEN.forEach(item => {
      item.addEventListener('click', () => {
        modalEN.classList.add('open');
        html.classList.add('no-scroll');
      });
    });

    // 모달창 닫기
    let modalCloseKR = document.querySelector('.bbs-modal-patent.kr .modal-bg');
    let modalCloseEN = document.querySelector('.bbs-modal-patent.en .modal-bg');
    
    // 모달창 닫기
    if (modalCloseKR) {
      modalCloseKR.addEventListener('click', () => {
        modalKR.classList.remove('open');
        html.classList.remove('no-scroll');
      });
    }

    if (modalCloseEN) {
      modalCloseEN.addEventListener('click', () => {
        modalEN.classList.remove('open');
        html.classList.remove('no-scroll'); 
      });
    }
  }
}