//
// Variables
//

// Get the #app element
const app = document.querySelector('#app');

// Store the API endpoint
const endpoint = 'https://nyt.barker.workers.dev';

// Store the desired categories
const categories = ['food', 'movies', 'technology'];


//
// Functions
//

/**
 * Get the JSON data from a Fetch request
 * @param {Response} response The Response object
 * @returns {Promise} The JSON data or the rejected response
 */
function getJSON (response) {
  return response.ok ? response.json() : Promise.reject(response);
}

/**
 * Sanitize and encode all HTML in a user-submitted string
 * {@link https://portswigger.net/web-security/cross-site-scripting/preventing}
 * @param {String} str The user-submitted string
 * @returns {String} The sanitized string
 */
function sanitizeHTML (str) {
  return str.replace(/[^\w. ]/gi, function (c) {
    return '&#' + c.charCodeAt(0) + ';'
  });
}

/**
 * Build the HTML string for a single story
 * @param {Object} story The story object
 * @returns {String} An HTML string
 */
function buildStory (story) {
  return `
    <article>
      <h3>
        <a href="${sanitizeHTML(story.url)}">
          ${sanitizeHTML(story.title)}
        </a>
      </h3>
      <p>
        <b>
          Last updated:
        </b>
        <time datetime="${sanitizeHTML(story.updated_date)}">
          ${sanitizeHTML(new Date(story.updated_date).toLocaleString())}
        </time>
      </p>
      <p>
        ${sanitizeHTML(story.abstract)}
      </p>
    </article>
  `;
}

/**
 * Build the HTML string for a single category
 * @param {Object} data The API data
 * @returns {String} An HTML string
 */
function buildCategory (data) {
  return `
    <article>
      <h2>${sanitizeHTML(data.section)}</h2>
      ${data.results.slice(0, 5).map(buildStory).join('')}
    </article>
  `;
}

/**
 * Make a Fetch request for the given category
 * @param {String} category The category
 * @returns {Promise} A Fetch request
 */
function fetchCategory (category) {
  // Options for the request
  const options = {
    method: 'POST',
    body: JSON.stringify({ category })
  };

  // Return the request
  return (
    fetch(endpoint, options)
      .then(getJSON)
      .then(buildCategory)
  );
}

/**
 * Join the category strings and add them to the DOM
 * @param {String[]} categories An array of HTML strings
 */
function showCategories (categories) {
  app.innerHTML = categories.join('');
}

/**
 * Add an error message to the DOM
 */
function showError () {
  app.innerHTML = `
    <p>
      <strong>
        Sorry, there was a problem fetching today's top stories. You can still view them using the link above.
      </strong>
    </p>
  `;
}

/**
 * Add the first five stories from each category to the DOM
 */
function getStories () {
  // Create an array of Fetch requests for the categories
  const requests = categories.map(fetchCategory);

  // This will resolve once ALL the requests have resolved
  const categoryStrings = Promise.all(requests);

  // Join the resolved array and add it to the DOM
  categoryStrings.then(showCategories).catch(showError);
}


//
// Inits & Event Listeners
//

// Add the first five stories from each category to the DOM
getStories();