// HOME v3.0

let filterCurrentPage = 1;
let techCurrentPage = 1;
let popularCurrentPage = 1;
let featuredCurrentPage = 1;
let countPerPage = 1;
let defaultCardCount = 1;

// gets length of total pages
function totalPages(array){
  return Math.ceil(array.length / countPerPage);
}

// default card builder, and display when 'Less' is clicked
function defaultCardBuilder(array){
  if(window.innerWidth > 2000){ defaultCardCount = 5};
  if(window.innerWidth < 2000 && window.innerWidth > 1800){ defaultCardCount = 5};
  if(window.innerWidth < 1800 && window.innerWidth > 1450){ defaultCardCount = 4};
  if(window.innerWidth < 1450 && window.innerWidth > 1100){ defaultCardCount = 4};
  if(window.innerWidth < 1100 && window.innerWidth > 750){ defaultCardCount = 3};
  if(window.innerWidth < 750 && window.innerWidth > 400){ defaultCardCount = 3};
  if(window.innerWidth < 400){ defaultCardCount = 2};
  const data = array.slice(0, defaultCardCount).map(company => `
    <div class="card" id='card'>

        <div class="card-logo">
          <img class='card-img' src=${company.img} alt='${company.name} Logo'>
        </div>

        <div class='card-info'>
          <span class='card-discount'>${company.discount}</span><br>
          <span class='card-name'>${company.name}</span>
        </div>

        <div class='card-views'>
          <div class='card-likes'>
            <i>Views: ${company.views}</i><br>
            <i><!-- Likes: --> </i>
          </div>
          <div class='card-shares'>
            <!-- <i class="fa fa-heart-o" aria-hidden="true"></i>--><br>
            <!-- <i class="fa fa-share" aria-hidden="true"></i> -->
          </div>
        </div>

        <a href="${company.url}" class="card-button">Get Deal Now!</a>

    </div>
    `).join('');
    return data;
}

// card builder when 'More' is clicked
function pagination(previous, next, pageCountContainer, page, array, container){
  container.innerHTML = "";
  if(page < 1){ page = 1};
  if(page > totalPages(array)){ page = totalPages(array)};
  if(window.innerWidth > 2000){ countPerPage = 5};
  if(window.innerWidth < 2000 && window.innerWidth > 1800){ countPerPage = 5};
  if(window.innerWidth < 1800 && window.innerWidth > 1450){ countPerPage = 4};
  if(window.innerWidth < 1450 && window.innerWidth > 1100){ countPerPage = 4};
  if(window.innerWidth < 1100 && window.innerWidth > 750){ countPerPage = 3};
  if(window.innerWidth < 750 && window.innerWidth > 400){ countPerPage = 3};
  if(window.innerWidth < 400){ countPerPage = 2};
  // generates each card
  for(var i = (page-1) * countPerPage; i < (page * countPerPage) && i < array.length; i++){
    container.innerHTML += `
    <div class="card">

        <div class="card-logo">
          <img class='card-img' src=${array[i].img} alt='${array[i].name} Logo'>
        </div>

        <div class='card-info'>
          <span class='card-discount'>${array[i].discount}</span><br>
          <span class='card-name'>${array[i].name}</span>
        </div>

        <div class='card-views'>
          <div class='card-likes'>
            <i>Views: ${array[i].views}</i><br>
            <i><!-- Likes:--> </i>
          </div>
          <div class='card-shares'>
            <!-- <i class="fa fa-heart-o" aria-hidden="true"></i>--><br>
            <!-- <i class="fa fa-share" aria-hidden="true"></i> -->
          </div>
        </div>

        <a href="#" class="card-button">Get Deal Now!</a>

    </div>
        `;
  }
  // adds page of and total to display
  pageCountContainer.innerHTML = `${array.length} total <i class="fa fa-bookmark red-font" aria-hidden="true"></i> ${page} of ${totalPages(array)}`;
  // dims pagination arrows, first page previous dims, last page next dims
  if(page === 1){
    previous.style.opacity = "0";
  }else{
    previous.style.opacity = "1";
  }
  if(page === totalPages(array)){
    next.style.opacity = "0";
  }else{
    next.style.opacity = "1";
  }
}

// previous page action
function prevPage(previous, next, pageCountContainer, array, container){
  if(currentPage > 1){ currentPage--};
  pagination(previous, next, pageCountContainer, currentPage, array, container);
}
// next page action
function nextPage(previous, next, pageCountContainer, array, container){
  if(currentPage < totalPages(array)){ currentPage++};
  pagination(previous, next, pageCountContainer, currentPage, array, container);
}

// tech previous page action
function techPrevPage(previous, next, pageCountContainer, array, container){
  if(techCurrentPage > 1){ techCurrentPage--};
  pagination(previous, next, pageCountContainer, techCurrentPage, array, container);
}
// tech next page action
function techNextPage(previous, next, pageCountContainer, array, container){
  if(techCurrentPage < totalPages(array)){ techCurrentPage++};
  pagination(previous, next, pageCountContainer, techCurrentPage, array, container);
}

// popular previoius page action
function popularPrevPage(previous, next, pageCountContainer, array, container){
  if(popularCurrentPage > 1){ popularCurrentPage--};
  pagination(previous, next, pageCountContainer, popularCurrentPage, array, container);
}
// popular next page action
function popularNextPage(previous, next, pageCountContainer, array, container){
  if(popularCurrentPage < totalPages(array)){ popularCurrentPage++};
  pagination(previous, next, pageCountContainer, popularCurrentPage, array, container);
}

// featured previoius page action
function featuredPrevPage(previous, next, pageCountContainer, array, container){
  if(featuredCurrentPage > 1){ featuredCurrentPage--};
  pagination(previous, next, pageCountContainer, featuredCurrentPage, array, container);
}
// featured next page action
function featuredNextPage(previous, next, pageCountContainer, array, container){
  if(featuredCurrentPage < totalPages(array)){ featuredCurrentPage++};
  pagination(previous, next, pageCountContainer, featuredCurrentPage, array, container);
}