const topPostsElement = document.querySelector('.top__posts');
const bottomPostsElement = document.querySelector('.bottom__posts');

const searchInput = document.querySelector('.search--input');

const topPosts = [];
const bottomPosts = [];

const fixedPost = {
  link: 'https://blog.lugarh.com.br/guia-de-estudos-trabalho-remoto/',
  thumbnail: 'https://blog.lugarh.com.br/wp-content/uploads/2020/03/trabalho-remoto-guia.png',
  title: 'Trabalho remoto: guia de estudos para você se preparar',
  description: 'Em tempo de trabalho remoto, o Lugarh se uniu ao BNE – Banco Nacional de Empregos e ao Trabalha Brasil para preparar este guia de estudos.',
}

searchInput.addEventListener('keyup', function (e) {
  if (e.keyCode === 13) {
    searchJobByKeyword();
  }
});

let fetchTopPosts = fetch('https://blog.lugarh.com.br/tag/curso/feed/json')
  .then(res => res.json())
  .then(res => {
    topPosts.push(fixedPost);
    formatBlogPostData(topPosts, 3, res.postList);
    renderPost(topPosts, topPostsElement);
  })
  .then(res => {
    topPostsElement.classList.add('animation');
  });

let fetchBottomPosts = fetch('https://blog.lugarh.com.br/tag/noticia/feed/json')
  .then(res => res.json())
  .then(res => {
    formatBlogPostData(bottomPosts, 4, res.postList);
    renderPost(bottomPosts, bottomPostsElement);
  });

function formatBlogPostData(posts, limit, fetchResponse) {
  let count = 1;
  for (const response of fetchResponse) {
    let blogPost = {};
    blogPost.link = response.url;
    blogPost.thumbnail = response.image;
    blogPost.title = response.title;
    blogPost.description = response.summary;

    if (count > limit) break;

    posts.push(blogPost);
    count++;
  }
}

function createMarkup(data) {
  return data.map(info => `
    <a href="${info.link}" target="_blank" class="card post">
      <img class="post--image" src="${info.thumbnail}" alt="${info.title}">
      <div class="post__info">
        <h5 class="post__info--title">${info.title}</h5>
        <p class="post__info--subtitle">${info.description}</p>
      </div>
    </a>
    `).join('');
}

function filterPostDescription(description) {
  const descStart = description.indexOf('<p>') + 3;
  const descEnd = description.indexOf('</p>');

  return description.substring(descStart, descEnd)
}

function renderPost(data, element) {
  const markup = createMarkup(data);
  element.innerHTML = markup;

  return data;
}

function searchJobByKeyword() {
  console.log(searchInput.value);
  window.open(`https://www.bne.com.br/vagas-de-emprego?KeyWord=${searchInput.value}`, '_blank');
}