'use client'
import { Mutex } from "async-mutex"
import Link from "next/link"
import useAsyncEffect from "use-async-effect"
import { useShallow } from "zustand/shallow"
import { useCurrentAuthenticatedUserStore } from "../providers"

const navBarMutex = new Mutex()

export const NavBar = () => {

    const authUserStore = useCurrentAuthenticatedUserStore(useShallow((state) => state))

    useAsyncEffect(async () => {
        if(authUserStore.Id === -1) {
            const release = await navBarMutex.acquire()
            await authUserStore.sync()
            await release()
        }
    }, [authUserStore])

    return (
        <nav>
            <div className="flex items-center justify-center">
                <Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/orders/0/0">Orders</Link>
                {authUserStore.Admin && (<Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/users/0">Users</Link>)}
                <Link className=" pl-7 pr-7 pt-3 pb-3 hover:bg-purple-950" href="/items">Items</Link>
            </div>
        </nav>
    )
}