const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';`

const forumLatest =
  'https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json';
const forumTopicUrl = 'https://forum.freecodecamp.org/t/';
const forumCategoryUrl = 'https://forum.freecodecamp.org/c/';
const avatarUrl = 'https://sea1.discourse-cdn.com/freecodecamp';

const allCategories = {
  299: { category: 'Career Advice', className: 'career' },
  409: { category: 'Project Feedback', className: 'feedback' },
  417: { category: 'freeCodeCamp Support', className: 'support' },
  421: { category: 'JavaScript', className: 'javascript' },
  423: { category: 'HTML - CSS', className: 'html-css' },
  424: { category: 'Python', className: 'python' },
  432: { category: 'You Can Do This!', className: 'motivation' },
  560: { category: 'Backend Development', className: 'backend' }
};

const timeAgo = (timestamp) => {
  const givenTime = Date.parse(timestamp);
  const currentTime = Date.now();
  const differenceInMilliseconds = currentTime - givenTime;
  const differenceInSeconds = Math.floor(differenceInMilliseconds / 1000);
  const differenceInMinutes = Math.floor(differenceInSeconds / 60);
  if (differenceInMinutes < 60) {
    return `${differenceInMinutes}m ago`;
  }

  const differenceInHours = Math.floor(differenceInMinutes / 60);
  if (differenceInHours < 24) {
    return `${differenceInHours}h ago`;
  }

  const differenceInDays = Math.floor(differenceInHours / 24);
  return `${differenceInDays}d ago`;
}

const viewCount = (views) => {
  if (views >= 1000) {
    return `${Math.floor(views / 1000)}k`;
  }
  
  return views;
}

const forumCategory = (id) => {
  let category = {
    category: "General",
    className: "general"
  };

  const allCategoriesHasId = Object.keys(allCategories).includes(`${id}`);
  if (allCategoriesHasId) {
    category = allCategories[`${id}`];
  }

  return `<a class="category ${category.className}" href="${forumCategoryUrl}${category.className}/${id}">${category.category}</a>`
}

const avatars = (posters, users) => {
  let avatars = "";

  posters.forEach((poster) => {
    const posterUsers = users.filter((user) => poster.user_id === user.id);

    posterUsers.forEach(({name, avatar_template}) => {
      let src = avatar_template.replace("{size}", "30");
      
      const srcHasRelativePath = avatar_template.startsWith("/user_avatar/");
      if (srcHasRelativePath) {
        src = `${avatarUrl}${src}`;
        avatars += `<img src="${src}" alt="${name}" />`;
      }
    });
  });

  return avatars;
}

const showLatestPosts = (forumLatest) => {
  const users = forumLatest.users;
  const topics = forumLatest.topic_list.topics;

  const postsContainer = document.querySelector("#posts-container");
  postsContainer.innerHTML = topics.map(({id, title, views, posts_count, slug, posters, category_id, bumped_at}) => {
    return (
      `<tr>
        <td>
          <a class="post-title" href="${forumTopicUrl}${slug}/${id}" >${title}</a>
          ${forumCategory(category_id)}
        </td>
        <td>
          <div class="avatar-container">${avatars(posters, users)}</div>
        </td>
        <td>${posts_count - 1}</td>
        <td>${views}</td>
        <td>${timeAgo(bumped_at)}</td>
      </tr>`);
  }).join("");
}

const fetchData = async () => {
  try {
    const response = await fetch(forumLatest);
    if (!response.ok) {
      throw new Error("Response was not OK");
    }
    const data = await response.json();
    showLatestPosts(data);
  } catch (err) {
    console.log(err);
  }
}

fetchData();