import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { AuthContext } from "../../AuthProvider";
import "bulma/css/bulma.min.css";

const MainNavigation = () => {
    const { user, login, logout } = useContext(AuthContext);

    return (
        <nav className="navbar is-dark" role="navigation" aria-label="main navigation">
            <div className="navbar-brand">
                <Link className="navbar-item" to="/">
                    Home
                </Link>
                <a
                    role="button"
                    className="navbar-burger"
                    aria-label="menu"
                    aria-expanded="false"
                    data-target="navbarBasicExample"
                    onClick={(e) => {
                        e.currentTarget.classList.toggle("is-active");
                        document
                            .getElementById("navbarBasicExample")
                            .classList.toggle("is-active");
                    }}
                >
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>

            <div id="navbarBasicExample" className="navbar-menu">
                <div className="navbar-start">
                    <a
                        href="https://mail.hangman-lab.top"
                        className="navbar-item"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        MailBox
                    </a>
                    <a
                        href="https://git.hangman-lab.top"
                        className="navbar-item"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Git
                    </a>
                </div>

                <div className="navbar-end">
                    {user && user.profile ? (
                        <div className="navbar-item">
                            <div className="buttons">
                                <span className="button is-primary is-light">
                                    {user.profile.name}
                                </span>
                                <button
                                    className="button is-danger"
                                    onClick={logout}
                                    type="button"
                                >
                                    Logout
                                </button>
                            </div>
                        </div>
                    ) : (
                        <div className="navbar-item">
                            <button
                                className="button is-primary"
                                onClick={login}
                                type="button"
                            >
                                Login
                            </button>
                        </div>
                    )}
                </div>
            </div>
        </nav>
    );
};

export default MainNavigation;