// header js

class Header {
  constructor() {
    this.header = document.querySelector(".header");

    //menu logic
    this.menu = document.querySelector(".menu");
    this.contactCtaMobileMenu = document.querySelector(
      ".contact-cta-mobile-menu"
    );
    this.hamburger = document.querySelector(".hamburger");
    this.menuTimeLine = this.getMenuTimeLine();
    this.isMenuOpen = false;

    //submenu logic
    this.subMenuTogglers = this.header.querySelectorAll(".has-children");
    this.currentSubMenuOpened = null;
    this.currentSubMenuActivator = null;
    this.subMenuIsOpen = false;
    this.subMenuTimeLine = null;
    this.currentMenu = null;
  }

  mount = async () => {
    this.subMenuTogglers.forEach((toggler) => {
      toggler.addEventListener("click", this.handleGetSubMenu);
    });

    this.hamburger.addEventListener("click", this.handleToggleMenu);
    this.contactCtaMobileMenu.addEventListener("click", this.handleToggleMenu);

    document.addEventListener("closeSubmenu", () => {
      if (this.currentSubMenuOpened) {
        this.handleToggleSubMenu(this.currentSubMenuOpened);
      }
    });
  };

  handleToggleMenu = async () => {
    if (!this.subMenuIsOpen) {
      //check if sub menu is not opened
      this.isMenuOpen = !this.isMenuOpen;

      this.isMenuOpen ? this.menuTimeLine.play() : this.menuTimeLine.reverse();

      document.querySelector("body").classList.toggle("overflow-hidden");
    } else {
      this.handleToggleSubMenu(this.currentSubMenuOpened);

      this.isMenuOpen = !this.isMenuOpen;
      this.isMenuOpen ? this.menuTimeLine.play() : this.menuTimeLine.reverse();

      document.querySelector("body").classList.toggle("overflow-hidden");
    }
  };

  getMenuTimeLine = () => {
    const getHamburgerTimeLine = () => {
      const bars = this.hamburger.querySelectorAll(".hamburger-bar");

      return gsap
        .timeline()
        .to(bars[1], { opacity: 0, duration: 0.3 }, 0)
        .to(bars[0], { y: "7px", duration: 0.3 }, 0)
        .to(bars[2], { y: "-7px", duration: 0.3 }, 0)
        .to(bars[0], { rotate: -45, duration: 0.3 }, 0.2)
        .to(bars[2], { rotate: 45, duration: 0.3 }, 0.2);
    };

    const getNavigationTimeLine = () => {
      return gsap.timeline().to(this.menu, { x: 0, opacity: 1, duration: 0.4 });
    };

    return gsap
      .timeline()
      .add(getHamburgerTimeLine())
      .add(getNavigationTimeLine(), "<")
      .pause();
  };

  //submenu
  handleGetSubMenu = (e) => {
    this.currentSubMenuActivator = e.currentTarget;
    const subMenu = this.header.querySelector(
      `#${this.currentSubMenuActivator.dataset.parentof}`
    );

    this.handleToggleSubMenu(subMenu);
  };

  handleToggleSubMenu = async (menu) => {
    if (!menu) return;

    this.subMenuIsOpen = !this.subMenuIsOpen;
    menu.classList.toggle("submenu-visible");
    this.currentSubMenuActivator.classList.toggle("active");

    !this.isMenuOpen
      ? document.querySelector("body").classList.toggle("overflow-hidden")
      : null;

    if (this.subMenuIsOpen) {
      this.handleOpenSubMenu(menu);
      this.currentSubMenuOpened = menu;
    } else {
      this.handleCloseSubMenu(menu);
      this.currentSubMenuOpened = null;
      this.currentSubMenuActivator = null;
    }
  };

  handleCheckIfModalIsOpen = () => {
    return new Promise((resolve) => {
      const modal = document.querySelector(".fullscreen-contact-visible");

      if (modal && window.innerWidth > 767) {
        const event = new Event("close_model");
        document.dispatchEvent(event);
      }

      resolve();
    });
  };

  handleOpenSubMenu = async (menu) => {
    await this.handleCheckIfModalIsOpen();

    const timeline = this.getTimeLine(menu);
    timeline.play();
    this.subMenuTimeLine = timeline;
    this.currentOpenSubmenu = menu;

    const close = menu.querySelector(".close-button");

    close.addEventListener("click", this.closeClick);
  };

  handleCloseSubMenu = async (menu) => {
    const close = menu.querySelector(".close-button");
    close.removeEventListener("click", this.closeClick);

    this.subMenuTimeLine.reverse();
    this.currentOpenSubmenu = null;
    this.subMenuTimeLine = null;
  };

  closeClick = () => {
    if (this.currentOpenSubmenu) {
      this.handleToggleSubMenu(this.currentOpenSubmenu);
    }
  };

  getTimeLine = (menu) => {
    const timeline = gsap.timeline();

    // const staggerItems = [
    //   ...menu.querySelectorAll("li"),
    //   ...menu.querySelectorAll(".contact-cta-mobile-menu"),
    // ];

    // staggerItems.forEach((item) => gsap.set(item, { opacity: 0, y: 10 }));

    timeline.to(menu, { opacity: 1, duration: 0.1 }, "menuStart");

    // timeline.to(
    //   staggerItems,
    //   {
    //     opacity: 100,
    //     duration: 0.1,
    //     y: 0,
    //     stagger: {
    //       amount: 1,
    //     },
    //   },
    //   "subMenuStart"
    // );

    return timeline.pause();
  };
}

// contact modal

class ContactModal {
  constructor(togglers, modal) {
    this.togglers = togglers;
    this.modal = modal;
    this.close = modal.querySelector(".close-button");
    this.isOpen = false;
    this.timeLine = gsap.timeline();
    this.hamburger = document.querySelector(".hamburger");
    this.success = document.querySelector('.sent-message');
    this.mobileContactCloseButton = document.querySelector(
      ".mobile-contact-close-button"
    );
  }

  mount = async () => {
    this.initForm();
    gsap.set(this.modal, { autoAlpha: 0 });

    this.togglers.forEach((toggler) => {
      toggler.addEventListener("click", this.handleToggleModal);
    });

    this.close.addEventListener("click", this.handleToggleModal);
    this.mobileContactCloseButton.addEventListener(
      "click",
      this.handleToggleModal
    );

    this.initTimeLine();

    document.addEventListener("close_model", () => {
      this.handleToggleModal();
    });
  };

  initTimeLine = async () => {
    this.timeLine.to(this.modal, { autoAlpha: 1 });

    // const title = this.modal.querySelector(".section-title");
    // const leftCol = this.modal.querySelector(".left-column");
    // const rightCol = this.modal.querySelector(".right-column");

    // if (!title || !leftCol || !rightCol) return;

    // this.timeLine.add(
    //   gsap
    //     .timeline()
    //     .to(title, { x: 0, duration: 0.3, autoAlpha: 1 })
    //     .to(leftCol, { y: 0, autoAlpha: 1, duration: 0.5 }, "-=0.1")
    //     .to(rightCol, { y: 0, autoAlpha: 1, duration: 0.5 }, "-=0.5")
    // );

    this.timeLine.pause();
  };

  handleToggleModal = async () => {
    this.isOpen = !this.isOpen;

    if (this.isOpen) {
      await this.checkIfSubMenuIsOpen();
    }

    this.modal.classList.toggle("fullscreen-contact-visible");
    this.hamburger.classList.toggle("hide");
    this.mobileContactCloseButton.classList.toggle("hide");

    document.querySelector("body").classList.toggle("overflow-hidden");

    this.isOpen ? this.timeLine.play() : this.timeLine.reverse();
  };

  checkIfSubMenuIsOpen = () => {
    return new Promise((resolve) => {
      const subMenu = document.querySelector(".submenu-visible");

      if (subMenu && window.innerWidth > 767) {
        const event = new Event("closeSubmenu");

        document.dispatchEvent(event);
      }

      resolve();
    });
  };

  initForm = async () => {
    const form = this.modal.querySelector("form");
    if (!form) return;

    form.addEventListener("submit", this.handleValidation);

    const formFields = form.querySelectorAll('.input');

    formFields.forEach(field => {
      field.addEventListener('change', (e) => {
        this.handleValidation(e, form);
      })
    })
  };

  handleValidation = (e, form = false) => {
    e.preventDefault();

    const target = form ? form : e.target;
    const formFields = target.querySelectorAll(".form-input");

    const formData = new FormData(target);


  };
  
}

// animations

class Animations {
    constructor() {
        this.paralaxItems = document.querySelectorAll(".paralax");
        this.fadeLeftElements = [
            ...document.querySelectorAll(".section-title"),
            ...document.querySelectorAll(".fade-left"),
        ];
        this.fadeRightElements = [...document.querySelectorAll(".fade-right")];
        this.fadeInElements = document.querySelectorAll(".fade-in");
        this.arrowsAnimationWrapper = document.querySelector(".arrow-animation-wrapper");
        this.extraParalaxItems = document.querySelectorAll('.paralax-extra');

        gsap.registerPlugin(ScrollTrigger);  
    }

    mount = async () => {
        this.paralaxAnimation();
        this.titlesAnimation();
        this.fadeInAnimation();
        this.fadeRightAnimation();
        this.arrowsAnimation();
        this.extraParalaxAnimation();
    };

    paralaxAnimation = async () => {
        this.paralaxItems.forEach((item) => {
            const y = Math.floor(Math.random() * 101) + item.classList.contains('bigger') ? 70 : 50;
            const x = Math.floor(Math.random() * 21) + item.classList.contains('bigger') ? 50 : 30;
            
            gsap.set(item, { 
                y: `-${y}px`,  
                x: `${x % 2 === 0 ? "-" : ""}${x}px`,
            });
 
            gsap.to(item, {
                y: 0, 
                x: 0, 
                scrollTrigger: {
                    trigger: item,
                    scrub: true,
                },
            });
        });
    };

    extraParalaxAnimation = async () => {
        this.extraParalaxItems.forEach(item => {
            const y = Math.floor(Math.random() * 101) + item.classList.contains('bigger') ? 70 : 50;
            const x = Math.floor(Math.random() * 21) + item.classList.contains('bigger') ? 50 : 30;

            gsap.to(item, {
                y: y, 
                x: x, 
                scrollTrigger: { 
                    trigger: item, 
                    scrub: true,  
                }, 
            });
        })
    }

    titlesAnimation = async () => {
        this.fadeLeftElements.forEach((item) => {
            gsap.set(item, { opacity: 0, x: -200 });

            gsap.to(item, {
                opacity: 1, 
                x: 1,
                scrollTrigger: {
                    trigger: item,
                    start: "top bottom-=100px",
                },
            });
        });
    };

    fadeInAnimation = async () => {
        this.fadeInElements.forEach((item) => {
            gsap.set(item, { y: 100, opacity: 0 });

            gsap.to(item, {
                opacity: 1,
                y: 0,
                scrollTrigger: {
                    trigger: item,
                    start: "top bottom-=50px",
                },
            });
        });
    };

    fadeRightAnimation = async () => {
        this.fadeRightElements.forEach((item) => {
            gsap.set(item, { opacity: 0, x: 200 });

            gsap.to(item, {
                opacity: 1,
                x: 1,
                scrollTrigger: {
                    trigger: item,
                    start: "top bottom-=100px",
                },
            });
        });
    };

    arrowsAnimation = async () => {
        
 
        if(!this.arrowsAnimationWrapper) return; 
        const arrows = this.arrowsAnimationWrapper.querySelectorAll('.arrow-animation');
       
        arrows.forEach((item, index) => {
            const opacity = item.getAttribute("opacity"); 
            item.setAttribute("data-opacity", opacity);

            gsap.set(item, {y:-20, opacity:0});
 
            setTimeout(() => {
                const timeline = gsap.timeline();
            timeline.to(item, {y:0, opacity: 1});
            timeline.to(item, {y:10, opacity: 0, delay: 0.2});
            timeline.repeat(-1); 
            }, index * 200);  
        }); 
         
    }
}

// cookies

const cookieSet = (key, value, location, days) => {
    var expires = "",
        path = "";
    if (typeof days != "undefined" && days != "") {
        var date = new Date();
        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
        expires = "; expires=" + date.toGMTString();
    }
    if (typeof location != "undefined" && location != "") {
        path = "; path=" + location;
    }
    document.cookie = key + "=" + escape(value) + expires + path;
};

 const cookieGet = (key) => {
    var keyValue = document.cookie.match("(^|;) ?" + key + "=([^;]*)(;|$)");
    return keyValue ? keyValue[2] : null;
};

 const disableScroll = () => {
    document.body.style.overflowY = "hidden";
};

 const enableScroll = () => {
    document.body.style.overflow = "";
};

 const toggleScroll = () => {
    if (document.body.classList.contains('scroll-locked')) {
        enableScroll()
        document.body.classList.remove('scroll-locked')
    } else {
        disableScroll()
        document.body.classList.add('scroll-locked')
    }
}

class CookiesPopup {
    cookieContainer = document.querySelector(".cookie-popup");
    cookieCloseBtn = this.cookieContainer.querySelector("#accept-cookies");

    addCookieCloseEvent = () => {
        this.cookieCloseBtn.addEventListener("click", (e) => {
            this.handleCookieHide();
            cookieSet("allow_cookie", 1, "/", 9999);
        });
    };

    handleCookieShow = () => {
        this.addCookieCloseEvent();
        setTimeout(() => {
            this.cookieContainer.classList.add("show");
        }, 1000);
    };

    handleCookieHide = () => {
        this.cookieContainer.classList.remove("show");
    };

    mount = () => {

        cookieGet("allow_cookie") ? null : this.handleCookieShow();
    };
}

// language switcher

class LanguageSelector {
    languageContainer = document.querySelector(".language-popup");
    openBtn = document.querySelector(".language-switcher .flag");
    openBtnFlag = document.querySelector(".language-switcher svg");
    closeBtn = document.querySelector(".language-switcher .language-popup .close-button");

    mount = () => {
        this.addToggleEvent();
    };

    addToggleEvent = () => {
        this.openBtn.addEventListener("click", (e) => {
            this.toggleShow();
        });
        this.openBtnFlag.addEventListener("click", (e) => {
            this.toggleShow();
        });

        this.closeBtn.addEventListener("click", (e) => {
            this.toggleShow();
        });

        document.querySelectorAll('.language-popup .language').forEach((item) => {
            item.addEventListener("click", (e) => {
                this.languageContainer.classList.remove('show');
            });
        });
    };

    toggleShow = () => {
        this.languageContainer.classList.toggle("show");
    }
}

// tabs module

class Tabs {
    constructor() {
        this.container = document.querySelector('.tabs-js');
        this.activeTab = null;
    }

    mount = async () => { 
        if(!this.container) return; 

        this.container.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', this.handleTabClick);

            if(tab.classList.contains('active')) {
                this.activeTab = tab.dataset.index;
            }
        })
    }

    handleTabClick = async (e) => {
        if(this.activeTab === e.currentTarget.dataset.index && window.innerWidth < 1024) {
            this.removeActiveTab();
            return;
        }

        this.setActiveTab(e.currentTarget);
    }

    removeActiveTab = () => {
        this.activeTab = null;
        this.removeActiveFromTabs();
    }

    setActiveTab = (tab) => {
        this.removeActiveFromTabs();

        this.activeTab = tab.dataset.index;

        tab.classList.add('active');
        this.container.querySelector('.tab-content-desktop[data-index="' + this.activeTab + '"]').classList.add('active');

        this.container.querySelector('.tab-content-mobile[data-index="' + this.activeTab + '"]').classList.add('active');
    }

    removeActiveFromTabs = () => {
        this.container.querySelectorAll('.tab').forEach(tab => {
            tab.classList.remove('active');
        })

        this.container.querySelectorAll('.tab-content-desktop').forEach(tab => {
            tab.classList.remove('active');
        });
        this.container.querySelectorAll('.tab-content-mobile').forEach(tab => {
            tab.classList.remove('active');
        });
    }
}

// masonry effect

const mansoryLayoutGallery = (section) => {
  // const indexDividerToReset = 12;
  const images = [...section.querySelectorAll(".gallery-wrapper-image-container")];
  const videos = [...section.querySelectorAll(".gallery-wrapper-image-container-video")];

  videos.length > 0 ? handleClick(videos) : null;

  if(window.innerWidth > 1024) {
    videos.length > 0 ? handleHoverVideo(videos) : null;
  }

  
  videos.length > 0 ? handleFullScreen(videos) : null;

};

const getAllIndexesDivisible = (array, index) => {
  return array
    .map((item, arrIndex) => {
      return arrIndex % index === 0 ? arrIndex : null;
    })
    .filter((item) => item !== null && item !== 0);
};


const handleClick = (videos) => {
  videos.forEach(video => {    
    video.addEventListener('click', async () => {
      const videoElement = video.querySelector('video');

      videoElement.paused ? await videoElement.play() : await videoElement.pause();
    });    
  });
};

const handleHoverVideo = (videos) => {
  videos.forEach(video =>{
    const videoElement = video.querySelector('video');

    if (videoElement)
    {
        video.addEventListener('mouseenter', () => {
          if(video.classList.contains("fullscreen--active")) return;
          videoElement.play();
        });
    
        video.addEventListener('mouseleave', () => {
          if(video.classList.contains("fullscreen--active")) return;
          videoElement.load();
        });
    }
  })
}

const handleFullScreen = (videos) => {
  videos.forEach(video => {
    const videoElement = video.querySelector('video');

    if (videoElement)
    {
      videoElement.addEventListener('webkitendfullscreen', () => {
        document.body.style.overflow = "auto";
        videoElement['plyr'].pause();
        video.classList.remove("fullscreen--active");
        const elementToClassRemove = video.querySelector('.plyr--fullscreen-fallback');
    
        if(elementToClassRemove) { 
          elementToClassRemove.classList.remove('plyr--fullscreen-fallback'); 
        }
      });
    }
  })
}

// testimonials slider

const testimonialsSliderInit = (sliderElement) => {
  new Splide(sliderElement, {
    arrows: false,
    perPage: 1,
  }).mount();
}; 

// video

class Videos {
    mount = async () => {
        document.querySelectorAll('.plyr-player').forEach((player) => {
            new Plyr(player, {

            });
        });
    }
}

// logos slider

$(function(){
    /*make sure the first element shows up*/
    $('.slides_container-desktop .slide:first-child').addClass("active");
    var interval = 3000,
     active_slide = 0,
     dom_slides = $('.slides_container-desktop > .slide'),
     num_slides = dom_slides.length;
    setInterval(function(){
        ++active_slide;
        if((active_slide = active_slide%num_slides)<0) active_slide+=num_slides;
        dom_slides.removeClass('active').eq(active_slide).addClass('active');
    },interval);
});

$(function(){
    /*make sure the first element shows up*/
    $('.slides_container-tablet .slide:first-child').addClass("active");
    var interval = 3000,
     active_slide = 0,
     dom_slides = $('.slides_container-tablet > .slide'),
     num_slides = dom_slides.length;
    setInterval(function(){
        ++active_slide;
        if((active_slide = active_slide%num_slides)<0) active_slide+=num_slides;
        dom_slides.removeClass('active').eq(active_slide).addClass('active');
    },interval);
});
$(function(){
    /*make sure the first element shows up*/
    $('.slides_container-mobile .slide:first-child').addClass("active");
    var interval = 3000,
     active_slide = 0,
     dom_slides = $('.slides_container-mobile > .slide'),
     num_slides = dom_slides.length;
    setInterval(function(){
        ++active_slide;
        if((active_slide = active_slide%num_slides)<0) active_slide+=num_slides;
        dom_slides.removeClass('active').eq(active_slide).addClass('active');
    },interval);
});

// form validation

// <script>
var keyPresses=0;

$(function() {
  $("#formularz-kontaktowy").validate({
    rules: {
      name: "required",
      message: "required",
      phone: "required",
      marketing: "required",
      privacypolicy: "required",
      mail: {
        required: true,
        email: true
      }
    },
    // Specify validation error messages
    messages: {
      name: "Wpisz swoje imię i nazwisko.",
      message: "Wpisz treść wiadomości.",
      phone: "Wpisz poprawnie swój numer telefonu.",
      marketing: "Twoja zgoda jest wymagana, byśmy mogli się z Tobą skontaktować",
      privacypolicy: "Twoja zgoda jest wymagana, byśmy mogli się z Tobą skontaktować",
      mail: "Wpisz poprawnie swój adres email."
    },
    errorPlacement: function(error, element) {
        if ((element.attr("name") == "marketing") || (element.attr("name") == "privacypolicy")) {
            error.appendTo(".checkbox-label[for="+element.attr("name")+"]");
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form) {
        if ($('#form-misdir').val()=='')
        {
            $('.submit .button-rounded').addClass('button-rounded--loading');
            
            $.ajax({
              type: "POST",
              url: '/?a0=1&c0=mucontact',
              data: {
                  "name": $('#form-name').val(),
                  "email": $('#form-mail').val(),
                  "phone": $('#form-phone').val(),
                  "message": $('#form-message').val(),
                  "cta": keyPresses,
                  "terms1": $('#marketing').is(':checked')?'yes':'no',
                  "terms2": $('#privacypolicy').is(':checked')?'yes':'no'
                }
            }).done(function(data){
                console.log(data);
                $(".sent-message").css("opacity", "1");
                $(".submit .button-rounded").removeClass("button-rounded--loading");
                $('#formularz-kontaktowy')[0].reset();
                setTimeout('$(".sent-message").css("opacity", "0");',2000);
            });
            
        }
    }
  });
  
  $(document).on("keyup",function(event) {
    if ((event.which == 27) && ($('.fullscreen-contact').hasClass('fullscreen-contact-visible'))) {
        $('.fullscreen-contact .close-button').click();
    }
  });
  
  $('.input').on("keyup",function(event) {
    keyPresses++;
  });
  
});



// youtube-mp4 popup

$(document).on("click", '.close-btn, .bg-overlay', function(event) { 

    var id = $(this).closest('aside').attr('id');

    $("#" + id + ".custom-model-main").removeClass('model-open');
    $("#" + id).remove();

});

$(document).keydown(function(e) {
    // ESCAPE key pressed
    if (e.keyCode == 27) {
        $(".custom-model-main").remove();
    }
});

$(".video-popup-open").on('click', function(event) {
  event.preventDefault();
  var id = $(this).data('popup');

  $('<aside id="' + id + '" class="custom-model-main"><div class="custom-model-inner"><div class="close-btn">×</div><div class="custom-model-wrap"><div class="video-container"><iframe src="https://www.youtube.com/embed/' + id + '" allow="accelerometer; autoplay; encrypted-media; gyroscope;" allowfullscreen></iframe></div></div></div><div class="bg-overlay"></div></aside>').appendTo(document.body);

  $("#" + id).addClass('model-open');
  $("#" + id + " iframe").prop('src', $("#" + id + " iframe").attr("src") + '?autoplay=1');
}); 



$(".video-popup-open-mp4").on('click', function(event) {
  event.preventDefault();
  var id = $(this).data('popup');

  $('<aside id="popup-mp4" class="custom-model-main"><div class="custom-model-inner"><div class="close-btn">×</div><div class="custom-model-wrap"><div class="video-container"><video id="popup-mp4-video" controls><source src="' + id + '" type="video/mp4"></video></div></div></div><div class="bg-overlay"></div></aside>').appendTo(document.body);

  $("#popup-mp4").addClass('model-open');
  $("#popup-mp4-video")[0].play();
});

// js file build fuctions

document.addEventListener("DOMContentLoaded", () => {
  const lazy = new LazyLoad();
   
  new CookiesPopup().mount();
  new LanguageSelector().mount();
  new Header().mount();
  new Animations().mount();
  new Videos().mount();
  new Tabs().mount();

  handleInitContactModal();
  handleInitTestimonialsSlider();
  handleInitMansorySection();
});

const handleInitTestimonialsSlider = async () => {
  const sliders = document.querySelectorAll(".testimonials-slider-js");

  sliders.forEach((slider) => testimonialsSliderInit(slider));
};

const handleInitLogosSlider = async (lazy) => {
  const sliders = document.querySelectorAll(".logos-slider-js");

  sliders.forEach((slider) => logosSliderInit(slider));
 
  lazy.update(); 
};  

const handleInitMansorySection = async () => {
  const sections = document.querySelectorAll(".mansory-gallery");

  sections.forEach((section) => mansoryLayoutGallery(section));
};

const handleInitContactModal = async () => {
  const togglers = document.querySelectorAll(".contact-modal-toggler");
  const modal = document.querySelector(".fullscreen-contact");

  if (!togglers || !modal) return;

  new ContactModal(togglers, modal).mount();
};