import { useState, useEffect } from "react";
import { NavLink } from 'react-router-dom';
import '../../../styles/App.css';

const MyNavBar = function (props) {

    const [userRole, setUserRole] = useState("NONE");

    useEffect(() => {
        window.addEventListener("storage", () => {
            getUserRole();
        });
        getUserRole();
    }, [])

    const getUserRole = function () {
        const role = localStorage.getItem("role") || "NONE";
        setUserRole(role);
    }

    const validate = function (userGroup) {
        if ((userGroup === "AUTH" && userRole !== "NONE") ||
            (userGroup === userRole)) {
            return true;
        }
        return false;
    }

    return (
        <div>
            <div>
                <h1 className="Main-label">Мир танков</h1>
            </div>
            <form className="collapse navbar-collapse">
                <nav className="navbar navbar-expand-lg justify-content-around">
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="Main_head navbar-nav me-auto align-items-center">
                        {
                            props.links.map(route => {
                                if (validate(route.userGroup)) {
                                    return (
                                        <li key={route.path}
                                            className="nav-item">
                                                <div className="Button_Main_Group container p-2" div="div">
                                                    <NavLink className="nav-link btn border border-3 border-dark fs-4 lh-15" role="button"
                                                        to={route.path}>
                                                            {route.label}
                                                    </NavLink>
                                                </div>
                                        </li>
                                    )
                                }
                            })
                        }
                        </ul>
                    </div>
                </nav>
            </form>
        </div>
    );
}

export default MyNavBar;