import React, { useState, useEffect } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Alert from './components/Alert';
import LeagueDetail from './components/LeagueDetail';
import CreateLeague from './components/CreateLeague';
import ModifyLeague from './components/ModifyLeague';
import LeaguesTable from './components/LeaguesTable';

import LoginForm from './components/LoginForm';
import RegisterForm from './components/RegisterForm';
import axios from 'axios';

const Leagues = () => {
    const [logged, setLogged] = useState(false);
    const [showLoginForm, setShowLoginForm] = useState(false);
    const [showRegisterForm, setShowRegisterForm] = useState(false);
    const [showLeagueDataForm, setShowLeagueDataForm] = useState(false);
    const [showModifyLeagueForm, setShowModifyLeagueForm] = useState(false);
    const [showCreateLeagueForm, setShowCreateLeagueForm] = useState(false);
    const [league, setLeague] = useState(null);
    const [data, setData] = useState(null);
    const [userData, setUserData] = useState(null);

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


    const showLeagueDetail = (league) => {
        setLeague(league);
        isAdmin ? setShowModifyLeagueForm(true) : setShowLeagueDataForm(true);
    }

    // const handleShowLeagueForm = () => {
    //     if (isAdmin) {
    //         setShowModifyLeagueForm(true);
    //     } else {
    //         setShowLeagueDataForm(true);
    //     }
    // };

    const getLeagues = () => {
        axios.get('http://localhost:8080/pa165/leagues',
            {
                headers: {
                    'accept': '*/*',
                    'Authorization': 'Bearer ' + localStorage.getItem("token")
                }
            })
            .then(function (response) {
                setData(response.data.content);
            })
            .catch(function (error) {
                setAlertType(1);
                setAlertMessage("Coulnd load data");
                setShowAlert(true);
            });
    }

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

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

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

    return (
        <>
            <Alert showAlert={showAlert} alertType={alertType} alertMessage={alertMessage} setShowAlert={setShowAlert} setAlertType={setAlertType} setAlertMessage={setAlertMessage} />
            <Header logged={logged} setLogged={setLogged} setShowLoginForm={setShowLoginForm} setShowRegisterForm={setShowRegisterForm} />
            <main className="container-fluid main">
                <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} />
                <CreateLeague showCreateLeagueForm={showCreateLeagueForm} setShowCreateLeagueForm={setShowCreateLeagueForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} setData={setData} />
                <ModifyLeague showModifyLeagueForm={showModifyLeagueForm} setShowModifyLeagueForm={setShowModifyLeagueForm} setAlertType={setAlertType} setAlertMessage={setAlertMessage} setShowAlert={setShowAlert} league={league} setLeague={setLeague} setData={setData} />
                <LeagueDetail showLeagueDataForm={showLeagueDataForm} setShowLeagueDataForm={setShowLeagueDataForm} league={league} />
                <section className="container-xxl">
                    <LeaguesTable data={data} showLeagueDetail={showLeagueDetail} setShowCreateLeagueForm={setShowCreateLeagueForm} />
                </section>
            </main>
            <Footer />
        </>
    );
}

export default Leagues;
