let nextButton = document.querySelector('#next-button');
let previousButton = document.querySelector('#previous-button');
let startButton = document.querySelector('#start-button');
let endButton = document.querySelector('#end-button');

let pageCounter = document.querySelector('#page-counter');

let leftNavigate = document.querySelector('#left');
let rightNavigate = document.querySelector('#right');

let space = document.querySelector('#pages-container');
let pages = document.querySelectorAll('.page');


let currentPage = space.dataset.page - 1;

function updateURL() {

  const url = new URL(window.location.href);

  // console.log(url.href);
  // https://example.com/?a=hello&b=world

  // console.log(url.origin);
  // https://example.com


  const new_params = new URLSearchParams([
    ['page', currentPage+1]
    // ...Array.from(url.searchParams.entries()),
  ]).toString();

  // console.log(new_params);
  // a=hello&b=world&c=a&d=2&e=false

  window.history.replaceState(null, "", `${url.pathname}?${new_params}`)
}

function updatePages() {
  currentPage = Math.max(0, Math.min(currentPage, pages.length-1))

  for (let i = 0; i < pages.length; i++) {
    pages[i].classList.add("hidden")

    if (i == currentPage) {
      pages[i].classList.remove("hidden")
    }
  }
  pageCounter.textContent = currentPage + 1;

  updateURL();
}

function pageUpdater(x) {
  return () => {
    currentPage += x;
    updatePages();
  }
}

function pageSetter(x) {
  return () => {
    currentPage = x;
    updatePages();
  }
}

let nextPage = pageUpdater(1);
let previousPage = pageUpdater(-1);

nextButton.onclick = nextPage;
previousButton.onclick = previousPage;
leftNavigate.onclick = previousPage;
rightNavigate.onclick = nextPage;

startButton.onclick = pageSetter(0);
endButton.onclick = pageSetter(pages.length-1);

function pageNav(e) {
  console.log(e.offsetX);
  console.log(e.offsetY);
  console.log(e);
  nextPage();
}

const pz = Panzoom(space, { // nada aqui funciona?
  // onClick: function (e) {
  //   console.log(e)
  //   return false;
  // },
  // maxScale: 5,
  // maxZoom: 0.1,
  // minZoom: 0.1
  // animate: true,
  // duration: 200,
  // pinchSpeed: 0,
  // zoomSpeed: 0.0001,
  // easing: "ease-in-out",
});

// panzoom.zoom(1 / 1.1);
space.parentElement.addEventListener('wheel', pz.zoomWithWheel)
updatePages();