import "./index.css";
import { Swiper } from "swiper";
// @ts-ignore
import "swiper/css";
// @ts-ignore
import "swiper/css/navigation";
// @ts-ignore
import "swiper/css/pagination";
// @ts-ignore
import "swiper/css/scrollbar";
// @ts-ignore
import "swiper/css/grid";
import { Autoplay, Pagination, Navigation, Thumbs } from "swiper/modules";
import React from "react";
import ReactDOM from "react-dom/client";
import Counter from "./components/Counter";

const intersectionObserverOption = {
  rootMargin: "0px",
  scrollMargin: "0px",
  threshold: 0,
};

const blockVideos = document.querySelectorAll(".block-video");

if (blockVideos) {
  blockVideos.forEach((vid) => {
    const v = vid.querySelector("video");

    if (v) {
      v.autoplay = true;
      v.muted = true;
      v.loop = true;
      v.controls = true;
    }
  });
}

const swiperStageElements = document.querySelectorAll(".swiper-stage");
if (swiperStageElements) {
  swiperStageElements.forEach((r) => {
    if (r) {
      const el = r as HTMLElement;
      new Swiper(el, {
        modules: [Navigation, Autoplay],
        slidesPerView: 1,
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
          enabled: true,
        },
        autoplay: {
          delay: 8000,
        },
        speed: 700,
        centeredSlides: true,
      });

      const v = r.querySelector("video");

      if (v) {
        v.autoplay = true;
        v.muted = true;
        v.loop = true;
      }
    }
  });
}

const swiperImageElements = document.querySelectorAll(".swiper-image");
if (swiperImageElements) {
  swiperImageElements.forEach((r) => {
    if (r) {
      const el = r as HTMLElement;
      new Swiper(el, {
        modules: [Navigation],
        slidesPerView: 1,
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
          enabled: true,
        },
        speed: 700,
        centeredSlides: true,
      });
    }
  });
}

/*const swiperBoxElements = document.querySelectorAll(".swiper-box");
if (swiperBoxElements) {
  swiperBoxElements.forEach((r) => {
    if (r) {
      const el = r as HTMLElement;
      new Swiper(el, {
        modules: [Pagination],
        slidesPerView: 1,
        autoplay: {
          delay: 2000,
        },
        spaceBetween: 40,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        speed: 700,
        centeredSlides: true,
      });
    }
  });
}*/

const blockBoxSwiper = document.querySelectorAll(".block-box-swiper");
if (blockBoxSwiper) {
  blockBoxSwiper.forEach((b) => {
    const swiperBox = b.querySelector(".swiper-box") as HTMLElement;
    const thumbs = b.querySelector(".swiper-thumbs") as HTMLElement;

    if (swiperBox && thumbs) {
      var thumbsSwiper = new Swiper(thumbs, {
        spaceBetween: 0,
        slidesPerView: "auto",
        slideToClickedSlide: true,
        centeredSlides: false,
        watchSlidesProgress: true,
        allowTouchMove: false,
      });

      new Swiper(swiperBox, {
        modules: [Pagination, Thumbs],
        slidesPerView: 1,
        centeredSlides: true,
        spaceBetween: 40,
        speed: 700,
        observer: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoHeight: true,
        thumbs: {
          swiper: thumbsSwiper,
          multipleActiveThumbs: false,
        },
        watchSlidesProgress: true,
      });
    }
  });
}

const header = document.getElementById("header");
if (header) {
  window.addEventListener("scroll", () => {
    let h = 55;
    if (window.scrollY > h) {
      header.classList.add("scrolled");
    } else {
      header.classList.remove("scrolled");
    }
  });
}

const overlay = document.getElementById("overlay");

//const menuBtns = document.querySelectorAll(".animated-menu-icon");
const menuBtns = document.querySelectorAll(".menu-btn");
const menuMobile = document.getElementById("hidden-menu");

if (menuBtns) {
  menuBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      if (menuMobile?.classList.contains("open")) {
        menuMobile?.classList.add("close");
      } else {
        menuMobile?.classList.remove("close");
      }
      menuMobile?.classList.toggle("open");
      overlay?.classList.toggle("hidden");
    });
  });
}

const navList = document.querySelector(".nav-list");

if (navList) {
  const navItems = navList.querySelectorAll(".nav-item");

  if (navItems) {
    navItems.forEach((item) => {
      const btn = item.querySelector(".sub-trigger");

      if (btn) {
        btn.addEventListener("click", () => {
          item?.classList.toggle("open");
        });
      }
    });
  }
}

const animElems = document.querySelectorAll(".anim-container");
if (animElems) {
  animElems.forEach((el) => {
    const items = el.querySelectorAll(".anim-item");

    items.forEach((i) => {
      const e = i as HTMLElement;

      if (!e.classList.contains("in-view")) {
        window.addEventListener("scroll", () => {
          const observer = new IntersectionObserver((ooo) => {
            ooo.forEach((o) => {
              /*console.log(
                e,
                ": scroll - intersectionRatio: " + o.intersectionRatio
              );*/
              if (o.intersectionRatio > 0.3) {
                e.classList.add("in-view");
                //console.log(e, ": in-view");
              }
            });
          }, intersectionObserverOption);

          observer.observe(el);
        });

        window.addEventListener("load", () => {
          const observer = new IntersectionObserver((ooo) => {
            ooo.forEach((o) => {
              /*console.log(
                e,
                ": scroll - intersectionRatio: " + o.intersectionRatio
              );*/
              if (o.intersectionRatio > 0.3) {
                e.classList.add("in-view");
                //console.log(e, ": in-view");
              }
            });
          }, intersectionObserverOption);

          observer.observe(el);
        });
      }
    });
  });
}

const numberItems = document.querySelectorAll(".number-item");
if (numberItems) {
  numberItems.forEach((item: Element) => {
    const el = item as HTMLElement;
    const n = el.dataset.number;
    ReactDOM.createRoot(item).render(
      <React.StrictMode>
        <Counter max={n || "0"} />
      </React.StrictMode>,
    );
  });
}

const forms_validate = document.querySelectorAll(".form-validate");
if (forms_validate) {
  forms_validate.forEach((f) => {
    f.addEventListener("submit", (ev) => {
      ev.preventDefault();
      ev.stopPropagation();

      const form = f as HTMLFormElement;
      const fd = new FormData(form);

      //@ts-ignore
      grecaptcha.ready(() => {
        //@ts-ignore
        grecaptcha
          .execute("6LcHY38sAAAAADWKxLpX7W4lmyjf7cSCvpzK-CbI", {
            action: "submit",
          })
          .then((token: any) => {
            fd.append("g-recaptcha-response", token);
            fetch(form.action, {
              method: "POST",
              body: fd,
            })
              .then((res) => res.json())
              .then((j) => {
                if (!j.error) {
                  form.reset();

                  if (j.message) {
                    window.alert(j.message);
                  }
                } else {
                  if (j.message) {
                    window.alert(j.message);
                  }
                }
              })
              .catch((error) => {
                if (error.message) {
                  window.alert(error.message);
                }
              });

            return false;
          })
          .catch(() => {
            window.alert("Errore durante l'invio della richiesta");
          });
      });
    });
  });
}

const accordions = document.querySelectorAll(".accordion");

if (accordions) {
  accordions.forEach((ac) => {
    const trigger = ac.querySelector(".trigger");
    trigger?.addEventListener("click", () => {
      if (ac.classList.contains("open")) {
        ac?.classList.add("close");
      } else {
        ac?.classList.remove("close");
      }
      ac.classList.toggle("open");
    });
  });
}

const galleries = document.querySelectorAll(".block-gallery");
if (galleries) {
  popupHandler(galleries);
}

function popupHandler(galleries: NodeListOf<Element>) {
  galleries.forEach((g) => {
    const gallery_btns = g.querySelectorAll(".btn-gallery");

    if (gallery_btns) {
      const popup = g.querySelector(".popup-gallery");
      if (popup) {
        gallery_btns.forEach((b) => {
          const btn = b as HTMLElement;
          const index = parseInt(btn.id);

          const prev = popup.querySelector(
            ".swiper-button-prev",
          ) as HTMLElement;
          const next = popup.querySelector(
            ".swiper-button-next",
          ) as HTMLElement;

          btn.addEventListener("click", () => {
            new Swiper(".gallery-swiper", {
              modules: [Navigation],
              slidesPerView: 1,
              navigation: {
                enabled: true,
                prevEl: prev,
                nextEl: next,
              },
              initialSlide: index,
              autoHeight: true,
              speed: 600,
              autoplay: true,
              centeredSlides: true,
            });

            popup.classList.toggle("open");
            overlay?.classList.toggle("hidden");
          });
        });
      }
    }
  });
}