import React, { useState, useEffect } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import TeamPlayersTable from './components/TeamPlayersTable';
import PlayerDetail from './components/PlayerDetail';
import LoginForm from './components/LoginForm';
import RegisterForm from './components/RegisterForm';
import Alert from './components/Alert';
import axios from 'axios';

const MyTeam = () => {
    const [logged, setLogged] = useState(false);
    const [showLoginForm, setShowLoginForm] = useState(false);
    const [showRegisterForm, setShowRegisterForm] = useState(false);
    const [showPlayerDetail, setShowPlayerDetail] = useState(false);

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

    const [player, setPlayer] = useState(false);
    const [usersTeamId, setUsersTeamId] = useState();
    const [data, setData] = useState(null);

    const getUsersTeamId = () => {
        axios.get('http://localhost:8080/pa165/users/' + localStorage.getItem("userId"), {
            headers: {
                accept: "*/*",
                Authorization: 'Bearer ' + localStorage.getItem("token")
            }
        })
            .then(function (response) {
                if (response.data.team != null) {
                    setUsersTeamId(response.data.team);
                    getMyPlayers(response.data.team.id);
                }
            })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage("Coulnd load data");
                setShowAlert(true);
            });
    }

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

    const showPlayerDetails = (player) => {
        setPlayer(player);
        setShowPlayerDetail(true);
    }

    useEffect(() => {
        if (logged) {
            if (data === null) {
                getUsersTeamId();
            }
        } else {
            setData(null);
        }
    }, [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} />
            <main className="container-fluid main">
                <section className="container-xxl">
                    <TeamPlayersTable data={data} showPlayerDetails={showPlayerDetails} setData={setData} />
                </section>
            </main>
            <Footer />
        </div>
    );
}

export default MyTeam;
