import React, { useEffect, useState } from 'react';
import { Navbar, NavDropdown, Container, Nav, Button } from 'react-bootstrap';
import axios from 'axios';

const Header = ({ logged, setLogged, setShowLoginForm, setShowRegisterForm }) => {
    const [hasTeam, setHasTeam] = useState(null);

    const handleLogOut = () => {
        setLogged(false);
        localStorage.removeItem("userID");
        localStorage.removeItem("isAdmin");
        localStorage.removeItem("token");
    };

    const checkUsersTeam = () => {
        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) {
                    setHasTeam(true);
                }
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            });
    }

    useEffect(() => {
        if (hasTeam === null) {
            checkUsersTeam();
        }

        if (localStorage.getItem('token') == null) {
            setLogged(false);
        } else {
            setLogged(true);
        }
    }, [logged, localStorage.getItem('token')]);

    return (
        <Navbar bg="light" expand="lg">
            <Container>
                <Navbar.Brand href="/">Football Manager</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="/leagues">Leagues</Nav.Link>
                        {
                            hasTeam === true ?
                                <NavDropdown title="My club" id="basic-nav-dropdown">
                                    <NavDropdown.Item href="/myteam">My players</NavDropdown.Item>
                                    <NavDropdown.Item href="/mymatches">My matches</NavDropdown.Item>
                                </NavDropdown>
                                :
                                <></>
                        }
                        {
                            localStorage.getItem("isAdmin") === "true" ?
                                <Nav.Link href="http://localhost:8080/swagger-ui/index.html">Swagger doc.</Nav.Link>
                                :
                                <></>
                        }
                    </Nav>
                </Navbar.Collapse>
                <Navbar.Collapse className="justify-content-end">
                    {logged ?
                        <Nav><Button variant="secondary" onClick={handleLogOut}>Log out</Button></Nav>
                        :
                        <>
                            <Nav><Button className='me-1' variant="secondary" onClick={() => { setShowLoginForm(true) }}>Log in</Button></Nav>
                            <Nav><Button variant="secondary" onClick={() => { setShowRegisterForm(true) }}>Sign up</Button></Nav>
                        </>
                    }
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}
export default Header;