/* eslint no-unused-expressions: [2, { allowTernary: true }] */
/* eslint-disable no-unused-vars */

import Rellax from "rellax";
import "bootstrap/js/dist/dropdown";
import Modal from "bootstrap/js/dist/modal";
import Swiper, { Navigation, Thumbs } from "swiper";
import Flatpickr from "flatpickr";
import { Czech } from "flatpickr/dist/l10n/cs.js";
import { Collapse } from "bootstrap";

const scroll = { before: 0, after: 0 };
const header = document.querySelector(".header");
const menuItems = document.querySelectorAll("#menu-main li a");
const toggler = document.querySelector(".navbar-toggler");
const backdrop = document.querySelector(".backdrop");
const collapse = document.querySelector("#navbarText");
const root = document.querySelector(":root");
const dateTimeField = document.querySelectorAll(".date-time-picker");
const dateTimeField2 = document.querySelectorAll(".date-time-picker2");
const images = document.querySelectorAll(".parallax");
const rellaxes = [];
const toTop = document.querySelector("#totop");
const myModal = new Modal(document.getElementById("reservation-form"));

const modalTriggers = document.querySelectorAll(".modal-trigger");
modalTriggers.forEach((trigger) => {
   trigger.addEventListener("click", () => myModal.toggle());
});

const handleHeader = () => {
   scroll.before = Math.max(window.pageYOffset, window.scrollY, document.documentElement.scrollTop, document.body.scrollTop);
   scroll.before > 100 && scroll.before > scroll.after
      ? root.style.setProperty("--header-translate-y", `-100px`)
      : root.style.setProperty("--header-translate-y", "0px");
   scroll.after = Math.max(window.pageYOffset, window.scrollY, document.documentElement.scrollTop, document.body.scrollTop);
   scroll.after > 1 ? header.classList.add("header--has-shadow") : header.classList.remove("header--has-shadow");
   // totop hiding
   scroll.after === 0 ? toTop.classList.add("hidden") : toTop.classList.remove("hidden");
};

const handleResize = () => {
   if (window.innerWidth < 992) {
      rellaxes.forEach((el) => el.destroy());
   } else {
      rellaxes.forEach((el) => el.refresh());
   }
};

const bsCollapse = new Collapse(collapse, {
   toggle: false,
});

const menuHandler = () => {
   bsCollapse.toggle();
   toggler.classList.toggle("open");
   // document.body.classList.toggle("is-locked");
   backdrop.classList.toggle("is-visible");
   header.classList.toggle("is-white");
};

// close responsive menu on click

menuItems.forEach((item) => {
   if (window.innerWidth < 992) {
      item.addEventListener("click", menuHandler);
   }
});

const goToTop = () => {
   window.scrollTo({
      behavior: "smooth",
      top: 0
   });
};
toTop.addEventListener("click", () => goToTop());
// close menu on hamburger toggle click
toggler.addEventListener("click", () => {
   menuHandler();
});

// close menu on backdrop click
backdrop.addEventListener("click", () => {
   menuHandler();
});

// close menu on backdrop swipe
backdrop.addEventListener("touchstart", () => {
   menuHandler();
});

document.addEventListener("DOMContentLoaded", () => {
   // init parallaxes
   if (images.length > 0) {
      images.forEach((element) => {
         rellaxes.push(
            new Rellax(element, {
               round: true,
               center: false,
            })
         );
      });
   }
   // disable/enable parallax on resize
   window.addEventListener("resize", handleResize);
   // disable parallax on mobile
   handleResize();
   // bind header handler on scroll
   window.addEventListener("scroll", handleHeader);
   // init swiper gallery where present
   if (document.querySelector(".swiper-main")) {
      const swiperThumbs = new Swiper(".swiper-thumbs", {
         spaceBetween: 15,
         slidesPerView: 4,
         breakpoints: {
            // when window width is >= 320px
            320: {
               slidesPerView: 3,
               spaceBetween: 10,
            },
            // when window width is >= 480px
            640: {
               slidesPerView: 4,
               spaceBetween: 15,
            },
         },
         freeMode: false,
         watchSlidesProgress: true,
      });

      const spiwerMain = new Swiper(".swiper-main", {
         modules: [Navigation, Thumbs],
         navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
         },
         thumbs: {
            swiper: swiperThumbs,
         },
      });
   }
   // init date-time picker where fields are present
   if (dateTimeField.length > 0) {
      const config = {
         locale: Czech,
         enableTime: true,
         dateFormat: "d.m.y H:i",
      };

      dateTimeField.forEach((item) => Flatpickr(item, config));
      dateTimeField2.forEach((item) => Flatpickr(item, config));
   }
});