import { useState } from "react"
import { Link } from "react-router-dom"
import { User } from "../types"

import "../styles/TopBar.css"

export default function TopBar({ user }: { user: User | undefined }) {
    const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)

    return (
        <div className="forum-section topbar">
            <div className="topbar-left">
                <Link to="/">Home</Link>
                <Link to="/channels">Channels</Link>
                <Link to="/users">Users</Link>
                <Link to="/emojis">Emojis</Link>
            </div>
            <div className="topbar-center">
                {user && user.id == 5 ? (
                    <h1>Le Jeu</h1>
                ) : (
                    <h1>Tanuki's Forum</h1>
                )}
            </div>
            {user ? (
                <div className="topbar-right">
                    <Link to={`/u/${user.username}`}>{user.username}</Link>
                    <button onClick={() => {
                        localStorage.removeItem("token")
                        window.location.reload()
                    }}>
                        Logout
                    </button>
                    <img src={`/api/users/${user.username}/pfp`} alt="pfp" className="topbar-user-pfp" />
                </div>
            ) : (
                <div className="topbar-right">
                    <Link to="/login">Login</Link>
                    <Link to="/register">Register</Link>
                </div>
            )}
            <div className="burger-menu">
                {burgerMenuOpen && (
                    <div className="burger-menu-content">
                        <Link to="/">Home</Link>
                        <Link to="/channels">Channels</Link>
                        <Link to="/users">Users</Link>
                        <Link to="/emojis">Emojis</Link>
                        {user ? (
                            <div className="burger-menu-user">
                                <Link to={`/u/${user.username}`}>{user.username}</Link>
                                <button onClick={() => {
                                    localStorage.removeItem("token")
                                    window.location.reload()
                                }}>
                                    Logout
                                </button>
                            </div>
                        ) : (
                            <div className="burger-menu-user">
                                <Link to="/login">Login</Link>
                                <Link to="/register">Register</Link>
                            </div>
                        )}
                    </div>
                )}
                <button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
                    {burgerMenuOpen ? "Close" : "Menu"}
                </button>
            </div>
            
        </div>
    )
}