import React, { useState, useEffect } from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import LoginForm from './components/LoginForm';
import RegisterForm from './components/RegisterForm';
import TeamsTable from './components/TeamsTable';
import TeamDetail from './components/TeamDetail';
import CreateTeam from './components/CreateTeam';
import ModifyTeam from './components/ModifyTeam';
import Alert from './components/Alert';
import axios from 'axios';
import { useParams } from 'react-router-dom';

const Teams = () => {
    const [logged, setLogged] = useState(false);
    const [showLoginForm, setShowLoginForm] = useState(false);
    const [showRegisterForm, setShowRegisterForm] = useState(false);
    const [showCreateTeamForm, setShowCreateTeamForm] = useState(false);
    const [showModifyTeamForm, setShowModifyTeamForm] = useState(false);

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

    const [showTeamDetail, setShowTeamDetail] = useState(false);
    const [team, setTeam] = useState(null);
    const [data, setData] = useState(null);
    const [userData, setUserData] = useState(null);
    const [isAdmin, setIsAdmin] = useState(false);
    let { leagueId } = useParams();

    const showTeamDetails = (team) => {
        setTeam(team);
        isAdmin ? setShowModifyTeamForm(true) : setShowTeamDetail(true);
    }

    const getTeams = () => {
        axios.get('http://localhost:8080/pa165/league/' + leagueId + '/teams',
            {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setData(response.data);
            })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage("Couldnt load data");
                setShowAlert(true);
            });
    }

    const getUser = () => {
        if (localStorage.getItem("userId") == "null") {
            return;
        }
        axios.get('http://localhost:8080/pa165/users/' + localStorage.getItem("userId"),
            {
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setUserData(response.data);
            })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage("Couldnt load data");
                setShowAlert(true);
            });
    }

    useEffect(() => {
        if (logged) {
            if (data === null) {
                getUser();
                getTeams();
            }
        } 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} />
            <TeamDetail showTeamDetail={showTeamDetail} setShowTeamDetail={setShowTeamDetail} team={team} />
            <CreateTeam showCreateTeamForm={showCreateTeamForm} setShowCreateTeamForm={setShowCreateTeamForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} />
            <ModifyTeam showModifyTeamForm={showModifyTeamForm} setShowModifyTeamForm={setShowModifyTeamForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} team={team} setTeam={setTeam} setData={setData} />
            <main className="container-fluid main">
                <section className="container-xxl">
                    <TeamsTable data={data} showTeamDetails={showTeamDetails} setShowCreateTeamForm={setShowCreateTeamForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} setData={setData} />
                </section>
            </main>
            <Footer />
        </div>
    );
}

export default Teams;
