import React, {useContext, useEffect, useState} from 'react';
import {Link} from "react-router-dom";
import {AuthContext} from "../App";

const pathsCenter = [
    {name: "All Data", to: "/all", extra: ""},
    {name: "Upload Data", to: "/upload", extra: ""},
    {name: "My Data", to: "/mydata", extra: ""},
]

const pathsGuest = [
    {name: "Log In", to: "/login", extra: ""},
    {name: "Sign Up", to: "/register", extra: "rounded-full border border-white px-4 pb-1 pt-1 inline-block"},
]

const pathsLoggedIn = [
    {name: "Account", to: "/account", extra: ""},
    {name: "Logout", to: "/logout", extra: ""},
]

const pathsAdmin = [
    {name: "Admin", to: "/admin", extra: ""},
    {name: "Account", to: "/account", extra: ""},
    {name: "Logout", to: "/logout", extra: ""},
]

function Navbar({color = "text-white", hover = "hover:border-white"}) {
    const [showDropdown, setDropdown] = useState(false)
    const [userPaths, setUserPaths] = useState(pathsGuest)
    const {authState} = useContext(AuthContext)

    useEffect(() => {
        console.log(authState)
        if (authState.loggedIn) {
            if (authState.admin) setUserPaths(() => pathsAdmin)
            else setUserPaths(() => pathsLoggedIn)

        } else setUserPaths(() => pathsGuest)
    }, [authState])

    return <header className={"lg:flex lg:justify-between lg:items-center px-4 py-3 w-full mt-2 " + color}>
        <div className="flex flex-1 justify-between items-center mt-3 self-start">
            <Link to={"/"}>
                <h1 className="text-xl font-bold">RainTrack</h1>
            </Link>
            <button onClick={() => setDropdown(!showDropdown)}
                    className="px-2 py-1 lg:hidden block border border-white rounded-md cursor-pointer">
                <svg className="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                     viewBox="0 0 20 20"><title>Toggle Navigation</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
                </svg>
            </button>
        </div>

        <LinksContainer flex="lg:justify-center flex-2"
                        dropDown={showDropdown} paths={pathsCenter} color={color} hover={hover}/>

        <LinksContainer flex="lg:justify-end flex-1"
                        dropDown={showDropdown} paths={userPaths} color={color} hover={hover}/>

    </header>;
}

function LinksContainer(props) {
    return <div
        className={`lg:px-2 lg:pt-2 lg:pb-4 lg:flex lg:p-0 ${props.flex} ${props.dropDown ? "block" : "hidden"}`}>
        {props.paths.map(path => <Link to={path.to} key={path.name}>
            <div
                className={`lg:px-2 py-1 lg:mx-1 mt-1 block text-left font-semibold border-b-2 border-transparent 
				${props.hover} ${path.extra}`}>
                {path.name}
            </div>
        </Link>)}
    </div>
}

export default Navbar;