import { useState, useEffect } from "react"
import Character from "./Character";

function Characters() {
    const [characters, setCharacters] = useState([]);
    const [info, setInfo] = useState({});
    const [page, setPage] = useState(1);

    const getCharacters = () => {
        fetch(`https://rickandmortyapi.com/api/character?page=${page}`)
            .then(res => res.json())
            .then(adatok => {
                setCharacters(adatok.results);
                setInfo(adatok.info);
            })
            .catch(err => alert(err));
    }

    const asGetCharacters = async () => {
        try {
            let keres = await fetch(`https://rickandmortyapi.com/api/character?page=${page}`);
            let adatok = await keres.json();
            setCharacters(adatok.results);
            setInfo(adatok.info);

        } catch (error) {
            alert(error);
        }
    }

    const tovabb = () => {
        if (page < info.pages) {
            setPage(prev => prev + 1);
        }

    }

    const vissza = () => {
        if (page > 1) {
            setPage(prev => prev - 1);
        }

    }

    useEffect(() => {
        getCharacters();
    }, [page])

    return (
        <div className="bg-sky-300">
            <h2 className="text-2xl font-bold text-center text-sky-900 p-2">Characters</h2>
            <div className="flex flex-row items-center justify-center join m-2">
                <button onClick={vissza} className="join-item btn bg-sky-200">«</button>
                <button className="join-item btn bg-sky-200">{page}</button>
                <button onClick={tovabb} className="join-item btn bg-sky-200">»</button>
            </div>
            <div className="flex flex-row flex-wrap items-center justify-center">
                {
                    characters.map((character) => (<Character key={character.id} character={character} />))
                }
            </div>
             <div className="flex flex-row items-center justify-center join m-2">
                <button onClick={vissza} className="join-item btn bg-sky-200">«</button>
                <button className="join-item btn bg-sky-200">{page}</button>
                <button onClick={tovabb} className="join-item btn bg-sky-200">»</button>
            </div>
        </div>
    )
}

export default Characters