// SHOW UPCOMING CLASSES //

// currentDate
const today = new Date();
// All tab links
const tabs = document.querySelectorAll(".upcoming-classes-tab-link");
// All tabs container
const container = [...document.querySelectorAll(".tab-content-wrapper")];
container.forEach((div) => (div.textContent = ""));

// Days Difference Calculate
const calcDaysDifference = (date2, date1) =>
  Math.round(Math.abs((date2 - date1) / (1000 * 60 * 60 * 24)));

// Tab links setup
[...tabs].reduce((acc, link, i) => {
  // creating current Date
  const date = new Date(acc);
  //  Get days different
  const daysDifference = calcDaysDifference(date, today);
  // Attribute Value
  const attributeValue = `${date}`.slice(4, 15).split(" ").join("-");

  if (daysDifference === 0) {
    link.textContent = "Today";
  } else if (daysDifference === 1) {
    link.textContent = "Tomorrow";
  } else {
    link.textContent = `${date}`.slice(4, 10).split(" ").reverse().join(" ");
  }
  // set data attribution
  link.setAttribute("data-tab-index", `${attributeValue}`);
  container[i].setAttribute("data-tabe-pane", `${attributeValue}`);

  // date for accumulator
  return date.setDate(date.getDate() + 1);
}, `${today}`);

let classesData;

const nextDay = new Date();
nextDay.setDate(nextDay.getDate() + 1);
let selectedDate = `${nextDay}`.slice(4, 15).split(" ").join("-");
console.log(selectedDate);

// Fetch classes Data
const tillDate = new Date();
tillDate.setDate(tillDate.getDate() + 5);
const authToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MWY4Y2FiN2UyY2ZmNDE1MmQ4YjZkMTciLCJlbWFpbCI6ImFkbWluQHNodmFzYS5jb20iLCJyb2xlIjpbMjA0NV0sImlhdCI6MTY3ODM1NzMxMn0.TfViPmCNEGSmaI6g19eCapva0y7kTEnaee_AMSrEdhU";

const url = "https://services.shvasa.com/api/product/getGroupClassesForWebflow";

const headers = {
  "Content-Type": "application/json",
  Authorization: `token ${authToken}`,
};

const body = {
  fromDate: new Date(),
  tillDate: tillDate,
};

const fetchClassesData = function (selectedDate) {
  fetch(url, {
    method: "POST",
    headers: headers,
    body: JSON.stringify(body),
  })
    .then((response) => response.json())
    .then((data) => {
      classesData = data.body;
      //console.log(classesData);
      showClasses(selectedDate);
    })
    .catch((error) => {
      console.error("Error fetching class data:", error);
    });
};

fetchClassesData(selectedDate);

// Fetch Classes and display them
const showClasses = function (selectedDate) {
  const tabContainer = document.querySelector(
    `.tab-content-wrapper[data-tabe-pane = "${selectedDate}"]`
  );
  let html;
  tabContainer.textContent = "";
  classesData
    ?.filter(
      (item) =>
        // Filter Date
        new Date(item.classDateTime).getDate() ===
        new Date(selectedDate).getDate()
    )
    ?.forEach((item, i) => {
      if (i > 8) return;
      //update Class details
      const classDate = new Date(item?.classDateTime);
      const timeZone = `${classDate}`
        .slice(`${classDate}`.indexOf("(") + 1)
        .split(" ")
        .map((value) => value.at(0))
        .join("");
      const hours = `${classDate.getHours()}`.padStart(2, 0);
      const minutes = `${classDate.getMinutes()}`.padEnd(2, 0);

      // HTML Card
      html = `<div class="upcoming-class-card">
          <div class="upcoming-class-content">
        <div class='upcoming-class-time-wrapper'>
          <div class="upcoming-class-time">${hours}:${minutes}</div>
          <div class="upcoming-class-timezone">${timeZone}</div>
        </div>
        <figure class="upcoming-class-teacher-image-wrapper">
          <img
            src="${item?.teacherInfo.image}"
            loading="lazy"
            alt=""
            class="upcoming-class-teacher-image"
          />
        </figure>
        <div class="upcoming-classes-details">
          <div class="upcoming-class-name">
            ${item?.className}
          </div>
          <div>by ${item?.teacherInfo.name}</div>
          <div class="cta-spots-details">
            <a
              href="https://app.shvasa.com/book-class?classId=${item?.id}&teacher=${item?.teacherInfo?.name}&time=${item?.classDateTime}${urlParanew}"
              class="upcoming-class-book-btn w-button"
              >Book Class</a
            >
          </div>
        </div>
      </div>`;
      // Add card to the container
      tabContainer.insertAdjacentHTML("beforeend", html);
    });
};

// showClasses(selectedDate);

// Tab link click
document
  .querySelector(".upcoming-classes-tab-menu")
  .addEventListener("click", function (e) {
    if (!e.target.classList.contains("w--current")) return;
    selectedDate = e.target.dataset.tabIndex;
    //console.log(selectedDate);
    showClasses(selectedDate);
  });