// button component for the pagination
function Button({ active, children, ...props }) {
  return (
    <button className={`inline-block py-3 mx-px text-center leading-none rounded ${ active ? "text-blue-500 font-bold" : "bg-gray-50 enabled:hover:bg-gray-100 disabled:opacity-50" } ${ typeof children === "number" ? "w-12 px-1" : "px-4"}`} {...props}>{children}</button>
  );
};


// pagination component
function Pagination({ page, setPage, pages, hasNextPage }) {
  
  // handler for the next button
  function handleNext() {
    setPage(page+1);
  };
  
  // handler for the previous button
  function handlePrevious() {
    setPage(page-1);
  };
  
  return (
    <div className="p-5 flex items-center justify-center text-gray-600">
      <Button onClick={handlePrevious} disabled={page <= 1}>Previous</Button>
      { pages - page < 1 && page - 4 > 0 && <Button onClick={() => setPage(page - 4)}>{page - 4}</Button> }
      { pages - page < 2 && page - 3 > 0 && <Button onClick={() => setPage(page - 3)}>{page - 3}</Button> }
      { pages && page - 2 > 0 && <Button onClick={() => setPage(page - 2)}>{page - 2}</Button> }
      { pages && page - 1 > 0 && <Button onClick={() => setPage(page - 1)}>{page - 1}</Button> }
      <Button active={true}>{page}</Button>
      { page + 1 <= pages && <Button onClick={() => setPage(page + 1)}>{page + 1}</Button> }
      { page + 2 <= pages && <Button onClick={() => setPage(page + 2)}>{page + 2}</Button> }
      { page + 3 <= pages && page < 3 && <Button onClick={() => setPage(page + 3)}>{page + 3}</Button> }
      { page + 4 <= pages && page < 2 && <Button onClick={() => setPage(page + 4)}>{page + 4}</Button> }
      <Button onClick={handleNext} disabled={!hasNextPage}>Next</Button>
    </div>
  );
};


// for displaying the pagination component
function App() {
  // state
  const [page, setPage] = React.useState(1);
  const pages = 12; // dummy data for example
  
  // do something when the page changes
  React.useEffect(() => {
    // go get another page of results
  }, [page]);
  
  return (
    <div className="flex flex-col w-full min-h-screen items-center justify-center p-5">
      <Pagination page={page} setPage={setPage} hasNextPage={page < pages} />
      <Pagination page={page} setPage={setPage} pages={pages} hasNextPage={page < pages} />
    </div>
  );
};


// ========================================
// render the react app
ReactDOM.render(
  <App />,
  document.getElementById('app')
);