// NEW

document.addEventListener("DOMContentLoaded", function () {
  // Header Menu

  const submenuLinkEls = document.querySelectorAll("#header-link-pc");
  const sumbenuFeaturesListEl = document.querySelector(
    ".head-submenu-features-list"
  );
  const sumbenuCasesListEl = document.querySelector(".head-submenu-cases-list");
  const openMenuBtnEl = document.querySelector(".open-menu-btn");
  const closeMenuBtnEl = document.querySelector(".close-menu-btn");
  const menuBackdropEl = document.querySelector(".backdrop");
  const navAnchorLinkMobEls = document.querySelectorAll(
    ".head-title-mob.title-link"
  );

  submenuLinkEls.forEach((link) => {
    link.addEventListener("mouseover", () => {
      sumbenuFeaturesListEl.classList.add("active-info");
      sumbenuCasesListEl.classList.add("active-info");
    });

    link.addEventListener("mouseout", () => {
      sumbenuFeaturesListEl.classList.remove("active-info");
      sumbenuCasesListEl.classList.remove("active-info");
    });
  });

  document.addEventListener("click", function (event) {
    if (event.target.matches('a[href^="#"]')) {
      event.preventDefault();

      const targetId = event.target.getAttribute("href").slice(1);
      const targetElement = document.getElementById(targetId);

      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 110,
          behavior: "smooth",
        });
      }
    }
  });

  // Mob menu

  openMenuBtnEl.addEventListener("click", () => {
    document.body.classList.add("open-menu");
  });

  closeMenuBtnEl.addEventListener("click", () => {
    closeMobMenu();
  });

  menuBackdropEl.addEventListener("click", () => {
    closeMobMenu();
  });

  navAnchorLinkMobEls.forEach((link) => {
    link.addEventListener("click", () => {
      closeMobMenu();
    });
  });

  function closeMobMenu() {
    document.body.classList.remove("open-menu");
  }

  const activeCN = "active";
  let isMobile = window.innerWidth <= 1024;

  function initTabs() {
    const tabBtns = document.querySelectorAll(
      ".tabs-minor.active .tab-btn-minor"
    );

    tabBtns.forEach((tabBtn) => {
      tabBtn.addEventListener("click", function () {
        const elIndex = Array.from(tabBtn.parentNode.children)
          .filter((el) => el.classList.contains("tab-btn-minor"))
          .indexOf(tabBtn);
        const parentIndex = Array.from(
          tabBtn.closest(".tabs-minor").parentNode.children
        ).indexOf(tabBtn.closest(".tabs-minor"));

        tabBtns.forEach((btn) => btn.classList.remove(activeCN));
        tabBtn.classList.add(activeCN);

        const contentEls = document.querySelectorAll(
          `#cont-${parentIndex + 1} .tabs-content-text`
        );

        contentEls.forEach((contentEl, index) => {
          if (index === elIndex) {
            contentEl.classList.add(activeCN);
          } else {
            contentEl.classList.remove(activeCN);
          }
        });

        if (isMobile) {
          const tabsContent = document.querySelector(
            ".tabs-minor-col .tabs-content-text"
          );
          tabsContent && tabsContent.remove();

          const clonedContentEl = contentEls[elIndex].cloneNode(true);
          this.parentNode.insertBefore(clonedContentEl, this.nextSibling);
        }
      });
    });
  }

  initTabs();

  function initUseTabs() {
    const tabBtns = document.querySelectorAll(
      ".use-tabs-minor.active .use-tab-btn-minor"
    );

    tabBtns.forEach((tabBtn) => {
      tabBtn.addEventListener("click", function () {
        const elIndex = Array.from(tabBtn.parentNode.children)
          .filter((el) => el.classList.contains("use-tab-btn-minor"))
          .indexOf(tabBtn);
        const parentIndex = Array.from(
          tabBtn.closest(".use-tabs-minor").parentNode.children
        ).indexOf(tabBtn.closest(".use-tabs-minor"));

        tabBtns.forEach((btn) => btn.classList.remove(activeCN));
        tabBtn.classList.add(activeCN);

        const contentEls = document.querySelectorAll(
          `#cont-${parentIndex + 1} .use-tabs-content-text`
        );

        contentEls.forEach((contentEl, index) => {
          if (index === elIndex) {
            contentEl.classList.add(activeCN);
          } else {
            contentEl.classList.remove(activeCN);
          }
        });
      });
    });
  }

  initUseTabs();

  if (isMobile) {
    const activeMobileTab = document.querySelector(
      ".tabs-minor.active .tab-btn-minor.active"
    );
    if (activeMobileTab) activeMobileTab.click();
  }

  window.addEventListener("scroll", function () {
    const header = document.querySelector("header");
    if (window.scrollY > 70) {
      header.classList.add("fixed");
    } else {
      header.classList.remove("fixed");
    }
  });

  // const headMenuTrigger = document.querySelector(".head-menu-trigger");
  // headMenuTrigger.addEventListener("click", function () {
  //   const headNavLinks = document.querySelector(".head-nav-links");
  //   headNavLinks.classList.toggle("active");
  //   document.body.style.overflow = headNavLinks.classList.contains("active")
  //     ? "hidden"
  //     : "auto";
  // });

  // const headMenuClose = document.querySelector(".head-menu-close");
  // headMenuClose.addEventListener("click", function () {
  //   const headNavLinks = document.querySelector(".head-nav-links");
  //   headNavLinks.classList.remove("active");
  //   document.body.style.overflow = "auto";
  // });

  // const headNavLinks = document.querySelectorAll(".head-nav-link");
  // headNavLinks.forEach((link) => {
  //   link.addEventListener("click", function () {
  //     const headNavLinks = document.querySelector(".head-nav-links");
  //     headNavLinks.classList.remove("active");
  //     document.body.style.overflow = "auto";
  //   });
  // });

  window.addEventListener("resize", function () {
    isMobile = window.innerWidth <= 1024;

    if (window.innerWidth > 1240) {
      if (document.body.classList.contains("open-menu")) {
        document.body.classList.remove("open-menu");
      }
    }

    if (isMobile) {
      const activeMobileTab = document.querySelector(
        ".tabs-minor.active .tab-btn-minor.active"
      );
      if (activeMobileTab) activeMobileTab.click();
    }
  });
});

// -------------------------

window.addEventListener("DOMContentLoaded", function () {
  window.addEventListener("resize", function () {
    elemAlign(document.getElementsByClassName("plane-slider-label"), 20, 1024);
    if (window.innerWidth > 540)
      document.querySelector("header").style.top = "0";
  });
  load();
});

window.ondragstart = function (de) {
  if (de.target.tagName == "IMG") {
    return false;
  }
};

let prevScrollpos = window.pageYOffset;
window.addEventListener("scroll", function () {
  const currentScrollPos = window.pageYOffset;
  if (window.innerWidth < 541) {
    if (prevScrollpos > currentScrollPos) {
      document.querySelector("header").style.top = "0";
    } else {
      document.querySelector("header").style.top = "-70px";
    }
  }
  prevScrollpos = currentScrollPos;
});

function load() {
  /* --- Tawk Cover --- */
  if (sessionStorage.getItem("chatStatus") !== "True") {
    const tawkCover = document.getElementById("tawk-cover");
    tawkCover.style.display = "inline";
  } else {
    loadTwk();
  }

  /* --- Cookies Form --- */
  if (localStorage.getItem("cookiesStatus") !== "True") {
    const cookiesMsg = document.getElementById("cookies-wrapper");
    cookiesMsg.style.display = "inline";
    window.onstorage = (event) => {
      if (event.key != "cookiesStatus") return;
      if (event.newValue == "True") {
        cookiesMsg.style.display = "none";
        window.onstorage = none;
      }
    };
  }

  /* --- Plan Slider --- */
  const planSliders = document.getElementsByClassName("plan-slider");
  for (let planSlider of planSliders) {
    planSlider.oninput = function () {
      updateServerPlan(this.value, this);
    };
  }

  /* --- Facebook Pixel --- */

  /* --- Lazy IMG Loading --- */

  /* --- Delay IMG Loading --- */
  const imgs = document.getElementsByClassName("img-delay-loading");
  Array.prototype.slice.call(imgs).map((img) => {
    img.src = img.dataset.src;
    img.removeAttribute("data-src");
    img.classList.remove("img-delay-loading");
  });

  /* --- Event Resize --- */
  window.dispatchEvent(new Event("resize"));

  /* --- SearchParams to actions --- */
  if (window.location.search) {
    try {
      const param = Object.fromEntries(
        new URLSearchParams(window.location.search)
      );
      if (param.clk) document.getElementById(param.clk).click();
      history.replaceState(
        {},
        document.title,
        window.location.href.split("?")[0]
      );
    } catch {}
  }
}

/* --- Tawk Cover --- */
function loadTwk() {
  var Tawk_API = Tawk_API || {},
    Tawk_LoadStart = new Date();
  (function () {
    var s1 = document.createElement("script"),
      s0 = document.getElementsByTagName("script")[0];
    s1.async = true;
    s1.src = "https://embed.tawk.to/6044b6f01c1c2a130d65dd58/1f066l818";
    s1.charset = "UTF-8";
    s1.setAttribute("crossorigin", "*");
    s0.parentNode.insertBefore(s1, s0);
  })();
}

function openTwk() {
  const tawkCover = document.getElementById("tawk-cover");
  tawkCover.style.display = "none";
  loadTwk();
  function iframeElemClick(selector, count) {
    setTimeout(() => {
      let status = 0;
      const iframes = document.getElementsByTagName("iframe");
      for (let iframe of iframes) {
        const elem = iframe.contentWindow.document.querySelector(selector);
        if (elem) {
          elem.click();
          status = 1;
          break;
        }
      }
      count += 1;
      if (!status & (count < 100)) {
        iframeElemClick(selector, count);
      }
    }, 100);
  }
  iframeElemClick('i[role="button"][class~="tawk-icon-close"]', 0);
  iframeElemClick('button[type="button"][class~="tawk-button"]', 0);
  sessionStorage.setItem("chatStatus", "True");
}

/* --- Cookies Form --- */
function cookiesAgree() {
  localStorage.setItem("cookiesStatus", "True");
  const cookiesMsg = document.getElementById("cookies-wrapper");
  cookiesMsg.style.display = "none";
}

/* --- Plan Slider --- */
function updateServerPlan(value, obj = undefined) {
  const arrVolume = [5000, 1000, 10000];
  const arrPrice = [0.01, 0.01, 0.008];
  const planSliders = document.getElementsByClassName("plan-slider");
  const planStorageVolume = document.getElementsByClassName(
    "plan-storage-volume"
  );
  const planStorageCopies = document.getElementsByClassName(
    "plan-storage-copies"
  );
  const planStoragePrice =
    document.getElementsByClassName("plan-storage-price");
  for (let planSlider of planSliders) {
    if (planSlider !== obj) {
      planSlider.value = value;
    }
  }
  for (let volume of planStorageVolume) {
    volume.innerText = Math.round(arrVolume[volume.dataset.plan] / value) / 100;
  }
  for (let copies of planStorageCopies) {
    copies.innerText = value;
  }
  for (let price of planStoragePrice) {
    price.innerText = arrPrice[price.dataset.plan] * value;
  }
}
function elemAlign(elements, minMrg = 0, minWidth = 0) {
  if (window.innerWidth <= minWidth) {
    for (let elem of elements) {
      elem.style.marginTop = `${minMrg}px`;
    }
  } else if (elements.length > 0) {
    const arr = Array.prototype.slice.call(elements).map((obj) => {
      return {
        o: obj,
        m: parseInt(getComputedStyle(obj).marginTop),
        t: parseInt(obj.getBoundingClientRect().top),
      };
    });
    const minPos = Math.max(...arr.map((a) => minMrg + a.t - a.m));
    arr.forEach((a) => {
      a.o.style.marginTop = `${minPos - a.t + a.m}px`;
    });
  }
}

function getInTouch() {
  const srv = "https://client.tebi.io/send-email-to-us";
  if (!validateEmail(document.getElementById("email").value)) {
    document.getElementById("email").classList.add("error");
    document.getElementById("button-error").innerText = "Wrong email";
    document.getElementById("button-msg-wrapper").style.top = "-100px"; // Error
    setTimeout(
      () => (document.getElementById("button-msg-wrapper").style.top = "-50px"),
      3000
    );
  } else {
    let param = {
      name: document.getElementById("name").value || " ",
      email: document.getElementById("email").value,
      storage: String(document.getElementById("storage").value || 0),
      transfer: String(document.getElementById("transfer").value || 0),
      message: document.getElementById("message").value || " ",
    };
    fetch(srv, {
      method: "POST",
      mode: "cors",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(param),
    })
      .catch((res) => {
        document.getElementById("button-error").innerText = "Send error";
        document.getElementById("button-msg-wrapper").style.top = "-100px"; // Error
        setTimeout(
          () =>
            (document.getElementById("button-msg-wrapper").style.top = "-50px"),
          3000
        );
        throw "fetch error";
      })
      .then((res) => {
        document.getElementById("button-msg-wrapper").style.top = "0px"; // Successfull
        setTimeout(
          () =>
            (document.getElementById("button-msg-wrapper").style.top = "-50px"),
          3000
        );
        ["name", "email", "storage", "transfer", "message"].forEach(
          (elem) => (document.getElementById(elem).value = "")
        );
      })
      .catch(() => {});
  }

  function validateEmail(value) {
    const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    return reg.test(value);
  }
}

function inputOnFocus(elem) {
  elem.classList.remove("error");
}

document.addEventListener("DOMContentLoaded", function () {
  const menuHeaders = document.querySelectorAll(
    ".foot-menu-mob, .head-menu-mob"
  );

  menuHeaders.forEach(function (menuHeader) {
    menuHeader.addEventListener("click", function () {
      const menuList = menuHeader.children[1];
      const arrow = menuHeader.firstElementChild.children[0];

      if (menuList.style.maxHeight) {
        menuList.style.maxHeight = null;
        arrow.style.transform = "rotate(0deg)";

        if (menuList.classList.contains("head-menu-list-mob")) {
          menuList.style.marginBottom = "0";
          menuList.classList.remove("open-menu");
        }
      } else {
        menuList.style.maxHeight = menuList.scrollHeight + "px";
        arrow.style.transform = "rotate(180deg)";

        if (menuList.classList.contains("head-menu-list-mob")) {
          menuList.style.marginBottom = "24px";
          menuList.classList.add("open-menu");
        }
      }
    });
  });
});

try {
  const swiper = new Swiper(".swiper", {
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-nxt",
      prevEl: ".swiper-button-prv",
    },
    slidesPerView: 2,
    breakpoints: {
      540: {
        slidesPerView: 3,
      },
    },
  });
} catch {}