// HOME v3.0

// containers
const myCouponsDisplay = document.getElementById('my-coupon-display');
const cardDisplay = document.getElementById('card-display');
const techCardDisplay = document.getElementById('tech-card-display');
const popularCardDisplay = document.getElementById('popular-card-display');
const featuredCardDisplay = document.getElementById('featured-card-display');
const cardDisplayHeading = document.getElementById('card-display-heading');
const bannerAd = document.getElementById('ad');
const wrapper = document.getElementById('wrapper');

// selection buttons
const all = document.getElementById('all');
const auto = document.getElementById('auto');
const fashion = document.getElementById('fashion');
const food = document.getElementById('food');
const fun = document.getElementById('fun');
const health = document.getElementById('health');

// selection page buttons
const nextButton = document.getElementById("next-button");
const previousButton = document.getElementById("previous-button");
const showAllFilter = document.getElementById('show-all-filter');
const showLessFilter = document.getElementById('show-less-filter');
const filterPageCount = document.getElementById("filter-page-count");

// tech page buttons
const techNextButton = document.getElementById("tech-next-button");
const techPreviousButton = document.getElementById("tech-previous-button");
const showAllTech = document.getElementById('show-all-tech');
const showLessTech = document.getElementById('show-less-tech');
const techPageCount = document.getElementById('tech-page-count');

// popular page buttons
const popularNextButton = document.getElementById("popular-next-button");
const popularPreviousButton = document.getElementById("popular-previous-button");
const showAllPopular = document.getElementById('show-all-popular');
const showLessPopular = document.getElementById('show-less-popular');
const popularPageCount = document.getElementById('popular-page-count');

// featured page buttons
const featuredNextButton = document.getElementById("featured-next-button");
const featuredPreviousButton = document.getElementById("featured-previous-button");
const showAllFeatured = document.getElementById('show-all-featured');
const showLessFeatured = document.getElementById('show-less-featured');
const featuredPageCount = document.getElementById('featured-page-count');

// function adjusts card display and spacing
function detectScrollBar(){

  if(myCouponsDisplay.scrollWidth > myCouponsDisplay.clientWidth){
    myCouponsDisplay.style.justifyContent = 'space-between';
  }else{
    myCouponsDisplay.style.justifyContent = 'center';
  }


  if(cardDisplay.scrollWidth > cardDisplay.clientWidth){
    cardDisplay.style.justifyContent = 'space-between';
  }else{
    cardDisplay.style.justifyContent = 'center';
  }
  if(techCardDisplay.scrollWidth > techCardDisplay.clientWidth){
    techCardDisplay.style.justifyContent = 'space-between';
  }else{
    techCardDisplay.style.justifyContent = 'center';
  }
  if(popularCardDisplay.scrollWidth > popularCardDisplay.clientWidth){
    popularCardDisplay.style.justifyContent = 'space-between';
  }else{
    popularCardDisplay.style.justifyContent = 'center';
  }
  if(featuredCardDisplay.scrollWidth > featuredCardDisplay.clientWidth){
    featuredCardDisplay.style.justifyContent = 'space-between';
  }else{
    featuredCardDisplay.style.justifyContent = 'center';
  }
}

// MINIMAL CARD DISPLAY
function defaultView(container){
  container.style.overflowX = 'auto';
  container.style.display = 'grid';
  container.style.gridAutoFlow = 'column';
  container.style.justifyContent = 'space-around';
  container.style.width = '100%';
}

// PAGINATED CARD DISPLAY
function paginationView(container){
  container.style.display = 'flex';
  container.style.flexDirection = 'row';
  container.style.flexWrap = 'wrap';
  container.style.justifyContent = 'center';
}

// FILTERED SHOW ALL BUTTON CLICKS
function showAll(){
  currentPage = 1;
  paginationView(cardDisplay);
  document.querySelector('.filter').style.opacity = '1';


//    pagination(previousButton, nextButton, filterPageCount, 1, myCouponData, cardDisplay);

  if(cardDisplayHeading.innerText === 'Food'){
    pagination(previousButton, nextButton, filterPageCount, 1, foodData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Fashion'){
    pagination(previousButton, nextButton, filterPageCount, 1, fashionData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Automotive'){
    pagination(previousButton, nextButton, filterPageCount, 1, autoData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Entertainment'){
    pagination(previousButton, nextButton, filterPageCount, 1, funData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Health'){
    pagination(previousButton, nextButton, filterPageCount, 1, healthData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'All Choices'){
    pagination(previousButton, nextButton, filterPageCount, 1, allArrays, cardDisplay);
  }
}

// FILTERED SHOW LESS BUTTON CLICKS
function showLess(){
  defaultView(cardDisplay);
  detectScrollBar();
  document.querySelector('.filter').style.opacity = '0';

  if(cardDisplayHeading.innerText === 'Food'){
    cardDisplay.innerHTML = defaultCardBuilder(foodData);
  }
  if(cardDisplayHeading.innerText === 'Fashion'){
    cardDisplay.innerHTML = defaultCardBuilder(fashionData);
  }
  if(cardDisplayHeading.innerText === 'Automotive'){
    cardDisplay.innerHTML = defaultCardBuilder(autoData);
  }
  if(cardDisplayHeading.innerText === 'Entertainment'){
    cardDisplay.innerHTML = defaultCardBuilder(funData);
  }
  if(cardDisplayHeading.innerText === 'Health'){
    cardDisplay.innerHTML = defaultCardBuilder(healthData);
  }
  if(cardDisplayHeading.innerText === 'All Choices'){
    cardDisplay.innerHTML = defaultCardBuilder(allArrays);
  }
}

// FILTERED PREVIOUS BUTTON CLICKS
function clickPrevious(){
  if(cardDisplayHeading.innerText === 'Food'){
    prevPage(previousButton, nextButton, filterPageCount, foodData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Fashion'){
    prevPage(previousButton, nextButton, filterPageCount, fashionData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Automotive'){
    prevPage(previousButton, nextButton, filterPageCount, autoData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Entertainment'){
    prevPage(previousButton, nextButton, filterPageCount, funData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Health'){
    prevPage(previousButton, nextButton, filterPageCount, healthData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'All Choices'){
    prevPage(previousButton, nextButton, filterPageCount, allArrays, cardDisplay);
  }
}

// FILTERED NEXT BUTTON CLICKS
function clickNext(){
  if(cardDisplayHeading.innerText === 'Food'){
    nextPage(previousButton, nextButton, filterPageCount, foodData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Fashion'){
    nextPage(previousButton, nextButton, filterPageCount, fashionData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Automotive'){
    nextPage(previousButton, nextButton, filterPageCount, autoData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Entertainment'){
    nextPage(previousButton, nextButton, filterPageCount, funData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'Health'){
    nextPage(previousButton, nextButton, filterPageCount, healthData, cardDisplay);
  }
  if(cardDisplayHeading.innerText === 'All Choices'){
    nextPage(previousButton, nextButton, filterPageCount, allArrays, cardDisplay);
  }
}

// INITIAL PAGE LOAD
function initialize(){
//  myCouponsDisplay.innerHTML = defaultCardBuilder(myCouponData);
  cardDisplay.innerHTML = defaultCardBuilder(foodData);
  techCardDisplay.innerHTML = defaultCardBuilder(techData);
  popularCardDisplay.innerHTML = defaultCardBuilder(popularData);
  featuredCardDisplay.innerHTML = defaultCardBuilder(featuredData);
}

// EVENT LISTENERS
window.addEventListener('load', initialize);
// checks for container width on screen sizing and adjusts cards spacing accordingly
window.addEventListener('resize', detectScrollBar);
// SELECTION EVENTS
showAllFilter.addEventListener('click', showAll);
showLessFilter.addEventListener('click', showLess);
previousButton.addEventListener('click', clickPrevious);
nextButton.addEventListener('click', clickNext);

food.addEventListener('click', () => {
  defaultView(cardDisplay);
  detectScrollBar();
  cardDisplayHeading.innerText = 'Food';
  document.querySelector('.filter').style.opacity = '0';
  cardDisplay.innerHTML = defaultCardBuilder(foodData);
});
fashion.addEventListener('click', () => {
  defaultView(cardDisplay);
  detectScrollBar();
  cardDisplayHeading.innerText = 'Fashion';
  document.querySelector('.filter').style.opacity = '0';
  cardDisplay.innerHTML = defaultCardBuilder(fashionData);
});
auto.addEventListener('click', () => {
  defaultView(cardDisplay);
  detectScrollBar();
  cardDisplayHeading.innerText = 'Automotive';
  document.querySelector('.filter').style.opacity = '0';
  cardDisplay.innerHTML = defaultCardBuilder(autoData);
});
fun.addEventListener('click', () => {
  defaultView(cardDisplay);
  detectScrollBar();
  cardDisplayHeading.innerText = 'Entertainment';
  document.querySelector('.filter').style.opacity = '0';
  cardDisplay.innerHTML = defaultCardBuilder(funData);
});
health.addEventListener('click', () => {
  defaultView(cardDisplay);
  detectScrollBar();
  cardDisplayHeading.innerText = 'Health';
  document.querySelector('.filter').style.opacity = '0';
  cardDisplay.innerHTML = defaultCardBuilder(healthData);
});
all.addEventListener('click', () => {
  defaultView(cardDisplay);
  detectScrollBar();
  cardDisplayHeading.innerText = 'All Choices';
  document.querySelector('.filter').style.opacity = '0';
  cardDisplay.innerHTML = defaultCardBuilder(allArrays);
});

// TECH EVENTS
showAllTech.addEventListener('click', () => {
  techCurrentPage = 1;
  paginationView(techCardDisplay);
  document.querySelector('.tech').style.opacity = '1';
  pagination(techPreviousButton, techNextButton, techPageCount, 1, techData, techCardDisplay);
});
showLessTech.addEventListener('click', () => {
  defaultView(techCardDisplay);
  detectScrollBar();
  document.querySelector('.tech').style.opacity = '0';
  techCardDisplay.innerHTML = defaultCardBuilder(techData);
});
techPreviousButton.addEventListener('click', () => {
  techPrevPage(techPreviousButton, techNextButton, techPageCount, techData, techCardDisplay);
});
techNextButton.addEventListener('click', () => {
  techNextPage(techPreviousButton, techNextButton, techPageCount, techData, techCardDisplay);
});

// POPULAR EVENTS
showAllPopular.addEventListener('click', () => {
  popularCurrentPage = 1;
  paginationView(popularCardDisplay);
  document.querySelector('.popular').style.opacity = '1';
  pagination(popularPreviousButton, popularNextButton, popularPageCount, 1, popularData, popularCardDisplay);
});
showLessPopular.addEventListener('click', () => {
  defaultView(popularCardDisplay);
  detectScrollBar();
  document.querySelector('.popular').style.opacity = '0';
  popularCardDisplay.innerHTML = defaultCardBuilder(popularData);
});
popularPreviousButton.addEventListener('click', () => {
  popularPrevPage(popularPreviousButton, popularNextButton, popularPageCount, popularData, popularCardDisplay);
});
popularNextButton.addEventListener('click', () => {
  popularNextPage(popularPreviousButton, popularNextButton, popularPageCount, popularData, popularCardDisplay);
});

// FEATURED EVENTS
showAllFeatured.addEventListener('click', () => {
  featuredCurrentPage = 1;
  paginationView(featuredCardDisplay);
  document.querySelector('.featured').style.opacity = '1';
  pagination(featuredPreviousButton, featuredNextButton, featuredPageCount, 1, featuredData, featuredCardDisplay);
});
showLessFeatured.addEventListener('click', () => {
  defaultView(featuredCardDisplay);
  detectScrollBar();
  document.querySelector('.featured').style.opacity = '0';
  featuredCardDisplay.innerHTML = defaultCardBuilder(featuredData);
});
featuredPreviousButton.addEventListener('click', () => {
  featuredPrevPage(featuredPreviousButton, featuredNextButton, featuredPageCount, featuredData, featuredCardDisplay);
});
featuredNextButton.addEventListener('click', () => {
  featuredNextPage(featuredPreviousButton, featuredNextButton, featuredPageCount, featuredData, featuredCardDisplay);
});