document.getElementById("logout").addEventListener("click", () => {
  localStorage.removeItem("user");
  location.replace("login.html");
});

fetch(
  `https://backend-test-js-eovio.ondigitalocean.app/getsome/${localStorage.getItem(
    "user"
  )}`
)
  .then((res) => res.json())
  .then((data) => displayCourses(data));

//   data.forEach((item) => console.log(item)));
//   displayCourses(data));

function displayCourses(array) {
  array.forEach((item) => {
    const img = document.createElement("img");
    img.src = item.url;

    const title = document.createElement("h4");
    title.textContent = item.title;

    const params = document.createElement("div");
    params.className = "params";

    // Game
    if (item.parameters.game) {
      const game = document.createElement("div");
      game.className = "game";
      params.append(game);
    }

    // Duration
    const time = document.createElement("div");
    time.className = "time";
    const vidlength = item.parameters.vidlength;

    if (vidlength % 60 === 0) {
      const hours = vidlength / 60;
      time.textContent = hours + "h";
    } else {
      const hours = vidlength / 60;
      const roundedh = Math.floor(hours);
      const minutes = (hours - roundedh) * 60;
      const roundedmin = Math.round(minutes);
      time.textContent = roundedh + "h " + roundedmin + "min";
    }

    params.append(time);

    // Beginner
    if (item.parameters.beginner) {
      const beginner = document.createElement("div");
      beginner.className = "beginner";
      beginner.textContent = "Beginner";
      params.append(beginner);
    }

    //   CC
    if (item.parameters.cc) {
      const cc = document.createElement("div");
      cc.className = "cc";
      cc.textContent = "CC";
      params.append(cc);
    }

    const oldprice = document.createElement("div");
    oldprice.className = "oldprice";
    oldprice.textContent = `€${item.oldprice}`;

    const newprice = document.createElement("div");
    newprice.className = "newprice";
    newprice.textContent = `€${item.newprice}`;

    const price = document.createElement("div");
    price.className = "price";
    price.append(oldprice, newprice);

    const course = document.createElement("div");
    course.className = "course";
    course.append(img, title, params, price);

    document.getElementById("content").append(course);
  });
}

// allcourses
const allcourses = document.getElementById("allcourses");
allcourses.addEventListener("click", () => {
  fetch(
    `https://backend-test-js-eovio.ondigitalocean.app/getsome/${localStorage.getItem(
      "user"
    )}`
  )
    .then((res) => res.json())
    .then((data) => displayCourses(data));
});

// search
fetch(
  `https://backend-test-js-eovio.ondigitalocean.app/getall/${localStorage.getItem(
    "user"
  )}`
)
  .then((res) => res.json())
  .then((data) => {
    document.getElementById("search").addEventListener("keyup", () => {
      displayCourses(
        data.filter((v) =>
          v.title
            .toLowerCase()
            .includes(document.getElementById("search").value.toLowerCase())
        )
      );
    });
  });