// const sidebar = document.querySelector('#sidebar')

// const sidebar = document.querySelector('#sidebar')

window.onscroll = function () {
  let navbar = document.querySelector("#navbar");
  let secondNav = document.querySelector("nav#second-nav");
  if (window.scrollY > 300) {
    if (navbar) navbar.classList.add("second-nav-active");
    navbar.classList.add("nav-resp");
  } else {
    if (navbar) navbar.classList.remove("second-nav-active");
    navbar.classList.remove("nav-resp");
  }
};

// show mega menu in upper nav
// const menuItem = document.querySelectorAll(".menu-item");

// // const allMenuBtn = document.querySelectorAll(".menu-btn");
// const allMenuContent = document.querySelectorAll(".menu-content");

// if (menuItem) {
//   menuItem.forEach((item) => {
//     const menuBtn = item.querySelector(".menu-btn");
//     const menuContent = item.querySelector(".menu-content");

//     menuBtn.addEventListener("click", () => {
//       if (menuContent) {
//         menuContent.classList.toggle("show-mega-menu");
//         item.classList.toggle("active");
//       }

//       menuItem.forEach((singleItem) => {
//         if (singleItem !== item) {
//           singleItem.classList.remove("active");
//         }
//       });

//       allMenuContent.forEach((content) => {
//         if (menuContent !== content) {
//           content.classList.remove("show-mega-menu");
//           // item.classList.remove('active')
//         }
//       });
//     });
//   });
// }

// show mega menu in upper nav
const menuItem = document.querySelectorAll(".menu-item");

// const allMenuBtn = document.querySelectorAll(".menu-btn");
const allMenuContent = document.querySelectorAll(".sub-menu");

if (menuItem) {
  menuItem.forEach((item) => {
    const menuBtn = item.querySelector("a");
    const menuContent = item.querySelector(".sub-menu");

    menuBtn.addEventListener("click", () => {
      if (menuContent) {
        menuContent.classList.toggle("show-mega-menu");
        item.classList.toggle("active");
      }

      menuItem.forEach((singleItem) => {
        if (singleItem !== item) {
          singleItem.classList.remove("active");
        }
      });

      allMenuContent.forEach((content) => {
        if (menuContent !== content) {
          content.classList.remove("show-mega-menu");
          // item.classList.remove('active')
        }
      });
    });
  });
}

// fetch submenu extra item data
const fetchMenudata = async () => {
  try {
    const res = await fetch("https://cse.uiu.local/wp-json/options/menu", {
      method: "GET",
    });
    const data = await res.json();

    return data;
  } catch (error) {
    console.log(`Error: ${error}`);
  }
};

fetchMenudata().then((data) => {
  // adding menu data into html
  addDataToMenu(data);
});

function addDataToMenu(data) {
  if (data) {
    console.log(data);
    const menuItem = document.querySelectorAll(".menu-item");

    if (menuItem) {
      menuItem.forEach((item) => {
        const targetData = data.find((data) =>
          item.className.includes(data.menu_parent_class)
        );

        const menuTitle = item.querySelector(".menu_title");

        const menuDesc = item.querySelector(".menu_description");

        const menuFeatureImage = item.querySelector(".menu_feature_image");

        if (targetData && menuFeatureImage) {
          menuFeatureImage.src = targetData.menu_feature_image;
        }

        if (targetData && menuTitle) {
          menuTitle.innerHTML = targetData.menu_title;
        }

        if (targetData && menuDesc) {
          menuDesc.innerHTML = targetData.menu_description;
        }
      });
    }
  }
}

// fetch submenu extra item data end

// accordion
const accordionAll = document.querySelectorAll("#accordion");

const accordionBodyAll = document.querySelectorAll(".accordion-body");

if (accordionAll) {
  accordionAll.forEach((accordion) => {
    const accordionBtn = accordion.querySelector(".accordion-btn");
    const accordionBody = accordion.querySelector(".accordion-body");

    accordionBtn.addEventListener("click", () => {
      accordionBody.classList.toggle("show");

      accordionBodyAll.forEach((accordion) => {
        if (accordionBody !== accordion) {
          accordion.classList.remove("show");
        }
      });
    });
  });
}

// const buttons = document.querySelectorAll("[data-carousel-button]")

document.querySelectorAll("[data-banner-slider-button]").forEach((button) => {
  button.addEventListener("click", () => {
    const offset = button.dataset.carouselButton === "next" ? 1 : -1;
    const slides = button
      .closest("[data-banner-slider]")
      .querySelector("[data-slides]");

    const activeSlide = slides.querySelector("[data-active]");
    let newIndex = [...slides.children].indexOf(activeSlide) + offset;
    if (newIndex < 0) newIndex = slides.children.length - 1;
    if (newIndex >= slides.children.length) newIndex = 0;

    slides.children[newIndex].dataset.active = true;
    delete activeSlide.dataset.active;
  });
});

setInterval(function () {
  if (document.querySelector(".carousel-button.next"))
    document.querySelector(".carousel-button.next").click();
}, 5000);

function openSearch() {
  document.getElementById("search-modal").style.height = "100%";
  console.log("search opened");
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeSearch() {
  document.getElementById("search-modal").style.height = "0%";
}

let totalDivs = document.querySelectorAll(
  "#faculty-carousel > .profile-carousel > .car-item"
).length;
let screenWidth = Math.max(
  document.documentElement.clientWidth || 0,
  window.innerWidth || 0
);
let totalWidth = totalDivs * 340;
let extraWidth = screenWidth - totalWidth;
let scrolled = 0;

function scrollToNext() {
  scrolled -= 345;
  let moveX = "";
  if (scrolled <= extraWidth - 400) {
    scrolled = 0;
  }

  moveX = scrolled.toString() + "px";
  //console.log(moveX, (-1*extraWidth), screenWidth, totalWidth, totalDivs)
  document.querySelectorAll(
    "#faculty-carousel > .profile-carousel"
  )[0].style.left = moveX;
}

function scrollToPrev() {
  scrolled = scrolled + 345;
  let moveX = "";
  if (scrolled > 340) {
    scrolled = extraWidth - 50;
  }

  moveX = scrolled.toString() + "px";
  //console.log(scrolled, moveX, (extraWidth), screenWidth, totalWidth, totalDivs)
  document.querySelectorAll(
    "#faculty-carousel > .profile-carousel"
  )[0].style.left = moveX;
}

let totalDivsAl = document.querySelectorAll(
  "#alumni-carousel > .profile-carousel > .car-item"
).length;
let screenWidthAl = Math.max(
  document.documentElement.clientWidth || 0,
  window.innerWidth || 0
);
let totalWidthAl = totalDivsAl * 340;
let extraWidthAl = screenWidthAl - totalWidthAl;
let scrolledAl = 0;

function scrollToNextAl() {
  scrolledAl -= 340;
  let moveXAl = "";
  if (scrolledAl <= extraWidthAl - 400) {
    scrolledAl = 0;
  }

  moveXAl = scrolledAl.toString() + "px";

  document.querySelectorAll(
    "#alumni-carousel > .profile-carousel"
  )[0].style.left = moveXAl;
}

function scrollToPrevAl() {
  scrolledAl = scrolledAl + 340;
  let moveXAl = "";
  if (scrolledAl > 340) {
    scrolledAl = extraWidthAl - 50;
  }

  moveXAl = scrolledAl.toString() + "px";
  document.querySelectorAll(
    "#alumni-carousel > .profile-carousel"
  )[0].style.left = moveXAl;
}

//for NAV

function openNav() {
  document.getElementById("myNav").style.height = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

//profile
const facultyProfile = document.querySelector("body.single-faculty");

if (facultyProfile) {
  window.addEventListener("resize", showSidebarOptions);

  const biosTitle = document.querySelectorAll("h2.m-text");
  const list = document.querySelector("ul.profile-choices");
  const bios = document.querySelectorAll(".desc-block");

  if (window.innerWidth < 600) {
    bios.forEach((el) => el.classList.remove(".desc-block-hidden"));
  } else {
    biosTitle.forEach((el, index) => {
      console.log(el.textContent);
      let text =
        '<li onclick="displaydetails(' +
        index +
        ')"><a >' +
        el.textContent +
        "</a></li>";
      list.insertAdjacentHTML("beforeend", text);
    });

    bios.forEach((el) => el.classList.add("desc-block-hidden"));
    bios[0].classList.remove("desc-block-hidden");

    let listItem = document.querySelectorAll("ul.profile-choices>li");
    listItem[0].classList.add("desc-active");
  }

  function displaydetails(i) {
    bios.forEach((el) => el.classList.add("desc-block-hidden"));
    bios[i].classList.remove("desc-block-hidden");

    let listItem = document.querySelectorAll("ul.profile-choices>li");
    listItem.forEach((el) => el.classList.remove("desc-active"));
    listItem[i].classList.add("desc-active");
  }

  function showSidebarOptions() {
    console.log(window.innerWidth);
    let windowX = window.matchMedia("(max-width: 600px)");
    if (windowX.matches) {
      bios.forEach((el) => el.classList.remove(".desc-block-hidden"));
    } else {
      bios.forEach((el) => el.classList.add("desc-block-hidden"));
      bios[0].classList.remove("desc-block-hidden");
    }
  }
}

// Simple example, see optional options for more configuration.
const colorPicker = document.querySelector(".pickers");

if (colorPicker) {
  const pickr = Pickr.create({
    el: ".color-picker",
    theme: "nano",

    swatches: [
      "rgba(244, 67, 54, 1)",
      "rgba(233, 30, 99, 0.95)",
      "rgba(156, 39, 176, 0.9)",
      "rgba(103, 58, 183, 0.85)",
      "rgba(63, 81, 181, 0.8)",
      "rgba(33, 150, 243, 0.75)",
      "rgba(3, 169, 244, 0.7)",
      "rgba(0, 188, 212, 0.7)",
      "rgba(0, 150, 136, 0.75)",
      "rgba(76, 175, 80, 0.8)",
      "rgba(139, 195, 74, 0.85)",
      "rgba(205, 220, 57, 0.9)",
      "rgba(255, 235, 59, 0.95)",
      "rgba(255, 193, 7, 1)",
    ],

    components: {
      // Main components
      preview: true,
      opacity: true,
      hue: true,

      // Input / output Options
      interaction: {
        hex: true,
        rgba: false,
        hsla: false,
        hsva: false,
        cmyk: false,
        input: true,
        clear: true,
        save: true,
      },
    },
  });

  pickr.on("change", (...args) => {
    let color = args[0].toHEXA();
    console.log(args);
    console.log(color.toString());

    const buttons = document.getElementsByClassName("primary-c");
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].style.backgroundColor = color.toString();
      buttons[i].addEventListener("mouseenter", (e) => {
        buttons[i].style.backgroundColor = "#F68B1F";
      });

      buttons[i].addEventListener("mouseleave", (e) => {
        buttons[i].style.backgroundColor = color.toString();
      });
    }
  });
}