import React, { useState, useEffect } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import PlayerDetail from './components/PlayerDetail';
import PlayersTable from './components/PlayersTable';
import CreatePlayer from './components/CreatePlayer';
import ModifyPlayer from './components/ModifyPlayer';
import LoginForm from './components/LoginForm';
import RegisterForm from './components/RegisterForm';
import Alert from './components/Alert';
import axios from 'axios';
import { Pagination } from 'react-bootstrap';

const Players = () => {
    const [logged, setLogged] = useState(false);
    const [showLoginForm, setShowLoginForm] = useState(false);
    const [showRegisterForm, setShowRegisterForm] = useState(false);
    const [showCreatePlayerForm, setShowCreatePlayerForm] = useState(false);
    const [showModifyPlayerForm, setShowModifyPlayerForm] = useState(false);

    const [showAlert, setShowAlert] = useState(false);
    const [alertType, setAlertType] = useState(0);
    const [alertMessage, setAlertMessage] = useState("");

    const [showPlayerDetail, setShowPlayerDetail] = useState(false);
    const [player, setPlayer] = useState(null);
    const [data, setData] = useState(null);
    const [isAdmin, setIsAdmin] = useState(false);
    const [page, setPage] = useState(0);
    const [maxPage, setMaxPage] = useState(0);

    const showPlayerDetails = (player) => {
        setPlayer(player);
        isAdmin && player.team === null ? setShowModifyPlayerForm(true) : setShowPlayerDetail(true);
    }

    const getPlayers = (p = page) => {
        axios.get('http://localhost:8080/pa165/players?page=' + p, {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            }
        })
            .then(function (response) {
                setMaxPage(response.data.totalPages - 1);
                setData(response.data.content);
            })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage("Coulnd load data");
                setShowAlert(true);
            });
    }

    const handleNextPage = () => {
        if (page === maxPage) {
            return;
        }
        setPage(page + 1);
        getPlayers(page + 1);
    };

    const handlePeviousPage = () => {
        if (page === 0) {
            return;
        }
        setPage(page - 1);
        getPlayers(page - 1);
    };

    const handleFirstPage = () => {
        setPage(0);
        getPlayers(0);
    };

    const handleLastPage = () => {
        setPage(maxPage);
        getPlayers(maxPage);
    };

    useEffect(() => {
        if (logged) {
            if (data === null) {
                getPlayers();
            }
        } else {
            setData(null);
        }

        if (localStorage.getItem("isAdmin") == "true") {
            setIsAdmin(true);
        } else {
            setIsAdmin(false);
        }
    }, [logged, data]);

    return (
        <div className="myteam">
            <Alert showAlert={showAlert} alertType={alertType} alertMessage={alertMessage} setShowAlert={setShowAlert} setAlertType={setAlertType} setAlertMessage={setAlertMessage} />
            <Header logged={logged} setLogged={setLogged} setShowLoginForm={setShowLoginForm} showRegisterForm={setShowRegisterForm} />
            <LoginForm showLoginForm={showLoginForm} setShowLoginForm={setShowLoginForm} setLogged={setLogged} setShowRegisterForm={setShowRegisterForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} />
            <RegisterForm showRegisterForm={showRegisterForm} setShowRegisterForm={setShowRegisterForm} setShowLoginForm={setShowLoginForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} />
            <PlayerDetail showPlayerDetail={showPlayerDetail} setShowPlayerDetail={setShowPlayerDetail} player={player} />
            <CreatePlayer showCreatePlayerForm={showCreatePlayerForm} setShowCreatePlayerForm={setShowCreatePlayerForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} />
            <ModifyPlayer showModifyPlayerForm={showModifyPlayerForm} setShowModifyPlayerForm={setShowModifyPlayerForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} player={player} setPlayer={setPlayer} setData={setData} />
            <main className="container-fluid main">
                <section className="container-xxl">
                    <PlayersTable data={data} showPlayerDetails={showPlayerDetails} setShowCreatePlayerForm={setShowCreatePlayerForm} setData={setData} />
                </section>
                <Pagination className="justify-content-center">
                    <Pagination.First onClick={handleFirstPage} />
                    <Pagination.Prev onClick={handlePeviousPage} />
                    <Pagination.Next onClick={handleNextPage} />
                    <Pagination.Last onClick={handleLastPage} />
                </Pagination>
            </main>
            <Footer />
        </div>
    );
}

export default Players;
