import React,{ useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(0);
  const [postsPerPage, setPostsPerPage] = useState(10);
  useEffect(()=>{
    getData();
  },[])
  async function getData(){
    setLoading(true);    
    const response = await fetch('https://stream-restaurant-menu-svc.herokuapp.com/item?category')
    let actualData = await response.json();
    setPosts(actualData)
    setLoading(false);   
  const indexOfLastPost = (currentPage + 1) * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
    const pageNumbers = [];
    for (let i = 0; i < Math.ceil(posts.length / postsPerPage); i++) {
      pageNumbers.push(i);
    const incrementPageNumber = () => {
      if (currentPage < pageNumbers.length - 1) {
        setCurrentPage((previousPageNumber) => previousPageNumber + 1);
    const decrementPageNumber = () => {
      if (currentPage > 0) {
        setCurrentPage((previousPageNumber) => previousPageNumber - 1);
    // if loading...
  if(loading){
    return <h2>Loading</h2>
  return (
    <div className="App">
      <table className="table">
        <thead>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </thead>
        <tbody>
          {currentPosts.map((post) => (
              <td key={`${post.id}-id`}>{post.id}</td>
              <td key={`${post.name}-firstName`}>{post.name}</td>
              <td key={`${post.short_name}-lastName`}>{post.short_name}</td>
        </tbody>
      </table>
      <button 
      id='first'
      type='button'
      className='first-page-btn'
      disabled={loading || currentPage === 0}
      onClick={() => {setCurrentPage(0)}}
        first
      </button>
      <button 
      id='previous'
      type='button'
      className='previous-page-btn'
      disabled={loading || currentPage === 0}
      onClick={decrementPageNumber}
        previous
        </button>
      <button 
      id='next'
      type='button'
      className='next-page-btn'
      disabled={loading || currentPage === pageNumbers[pageNumbers.length - 1]}
      onClick={incrementPageNumber}
      </button>
      <button 
      id='last'
      type='button'
      className='last-page-btn'
      disabled={loading || currentPage === 0}
      onClick={() => setCurrentPage(pageNumbers[pageNumbers.length - 1])}
      </button>