// ELEMENT SELECTORS
const authorContainer = document.querySelector("#authorContainer");
const paginationList = document.querySelector("#paginationList");

// console.log(authors);
const authorsPerPage = 3;

/* This function will handle calculating how many buttons are
needed and dynamically add them to the page */

function handlePagination(array) {
  // 1. Create a variable to store the number of buttons needed.
  //    The math should be (the length of the array divided by the authorsPerPage) rounded up
  const buttonsNeeded = Math.ceil(array.length / authorsPerPage);
  // 2-a. Start a loop to the length of the number of buttons calculated above.
  // Create a variable to store the HTML for the buttons
  let paginationButtons = '';
  for (let i = 0; i < buttonsNeeded; i++) {
  // 2-b. add the HTML markup of the buttons
    paginationButtons += `
     <li>
        <button>${i + 1}</button>
     </li>
    `;
  }
  // 2-c. Then add this variable to the paginationList element
  paginationList.insertAdjacentHTML("afterbegin", paginationButtons);

  // 3. Add the `active` class to the first button
  paginationList.querySelector('button').classList.add('active');
}

/* This function will handle calculating how many and which
authors to show on the current page and dynamically add them */

function showPage(array, page) {
  // 4. Create a variable to represent which author to start with on the page.
  //    The math should be (the page multiplied by the authorsPerPage) minus the authorsPerPage
  const startAuthor = (page * authorsPerPage) - authorsPerPage;
  // 5. Create a variable to represent which author to end with on the page.
  //    The math should be (the page multiplied by the authorsPerPage) minus one
  const endAuthor = (page * authorsPerPage) - 1;
  // 6. Reset the authorContainer's content to nothing to prevent previous cards staying on the page
  authorContainer.innerHTML = ``;
  // Create variable to add the author cards to, which will later be added to the page
  let authorCards = '';
  // 7-a. Start a loop to the length of the array's length
  for (i = 0; i < array.length; i++) {
  // 7-b. Inside, create a conditional checking if `i` is...
  //      - greater than or equal to the start variable
  //      - less than or equal to the end variable
  // create a variable to store the author cards
    if (i >= startAuthor && i <= endAuthor) {
  // 7-c. add the HTML markup of an author card to the authorCards varable.
      authorCards += `
            <div class="author-card">
        <div class="card-header">
          <img src="${array[i].image}" />
        </div>
        <div class="card-content">
          <h2 class="title">${array[i].name}</h2>
          <p>
            ${array[i].text}
          </p>
        </div>
      </div> 
      `;
    }
  }
  // 7-d. Then add this variable to the authorContainer element
  authorContainer.insertAdjacentHTML("beforeend", authorCards);
}

/* This event listener will handle calling our function
above to change the page & add the `active` class  */

paginationList.addEventListener("click", (e) => {
  // 8. Create a variable to store the button which currently has the `active` class
  let activeButton = paginationList.querySelector('.active');
  // 9-a. Make sure the user has clicked a `button`
  if(e.target.tagName === 'BUTTON') {
  // 9-b. If true...
  //      - Remove the `active` class from the currently active button
     activeButton.classList.remove("active");
  //      - Add the `active` class to the button just clicked
    e.target.classList.add("active");
  //      - Call showPage() passing it `authors` and the content of the button just clicked.
    showPage(authors, e.target.textContent);
  }
});

/* These function calls are needed to initialize the page */

handlePagination(authors);
showPage(authors, 1);