text: import React, { useEffect, useState } from "react";
  
  import Header from "../../components/Header";
  import Table from "../../components/Table";
  
  import { GetPokemons } from "../../services/api";
  
  import { Container, ContainerBaixo } from "./styles";
  
  function PokemonsList() {
    const [loading, setLoading] = useState(false);
    const [pokemonsList, setPokemonsList] = useState([{}]);
    const [currentPage, setcurrentPage] = useState(1);
    const [itemsPerPage] = useState(10);
    const [pageNumberLimit] = useState(5);
    const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
    const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
  
    useEffect(() => {
      loadPage();
    }, []);
  
    const loadPage = async () => {
      setLoading(true);
      const response = await GetPokemons();
      setPokemonsList(response);
      setLoading(false);
    };
  
    const handleClick = (event) => {
      setcurrentPage(Number(event.target.id));
    };
  
    const pages = [];
    for (let i = 1; i <= Math.ceil(pokemonsList.length / itemsPerPage); i++) {
      pages.push(i);
    }
  
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = pokemonsList.slice(indexOfFirstItem, indexOfLastItem);
  
    const renderPageNumbers = pages.map((number) => {
      if (number < maxPageNumberLimit + 1 && number > minPageNumberLimit) {
        return (
          <li
            key={number}
            id={number}
            onClick={handleClick}
            className={currentPage === number ? "active" : null}
          >
            {number}
          </li>
        );
      } else {
        return null;
      }
    });
  
    const handleNextbtn = () => {
      setcurrentPage(currentPage + 1);
  
      if (currentPage + 1 > maxPageNumberLimit) {
        setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
        setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
      }
    };
  
    const handlePrevbtn = () => {
      setcurrentPage(currentPage - 1);
  
      if ((currentPage - 1) % pageNumberLimit === 0) {
        setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
        setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
      }
    };
  
    let pageIncrementBtn = null;
    if (pages.length > maxPageNumberLimit) {
      pageIncrementBtn = <li onClick={handleNextbtn}> ... </li>;
    }
  
    let pageDecrementBtn = null;
    if (minPageNumberLimit >= 1) {
      pageDecrementBtn = <li onClick={handlePrevbtn}> ... </li>;
    }
  
    return (
      <>
        <Container>
          <Header headerTitle="Todos os Pokemons" />
          <Table pokemonsList={currentItems} loading={loading} />
          <ContainerBaixo>
            <ul className="pageNumbers">
              <li>
                <button
                  onClick={handlePrevbtn}
                  disabled={currentPage === pages[0] ? true : false}
                >
                  Voltar
                </button>
              </li>
              {pageDecrementBtn}
              {renderPageNumbers}
              {pageIncrementBtn}
              <li>
                <button
                  onClick={handleNextbtn}
                  disabled={
                    currentPage === pages[pages.length - 1] ? true : false
                  }
                >
                  Avançar
                </button>
              </li>
            </ul>
          </ContainerBaixo>
        </Container>
      </>
    );
  }
  
  export default PokemonsList;
  