import { Link } from 'preact-router/match'
import { isAdministrator, User, UserRole } from '../../shared/model'
import { prependBaseUrl } from '../api'

const ROLE_LABEL: Record<UserRole, string> = {
    ['admin']: 'Admin',
    ['moderator']: 'Moderatore',
    ['student']: 'Studente',
}

type Props = {
    user?: User | null
    noLogin?: boolean
}

export const Header = ({ user, noLogin }: Props) => (
    <header>
        <div class="logo">
            <a href={prependBaseUrl('/')}>PHC / Problemi</a>
        </div>
        <nav>
            {user ? (
                <>
                    {isAdministrator(user.role) && (
                        <div class="nav-item">
                            <Link activeClassName="active" href="/admin">
                                Pannello Admin
                            </Link>
                        </div>
                    )}
                    <div class="nav-item">
                        <Link activeClassName="active" href="/profile">
                            @{user.id}
                            {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
                        </Link>
                    </div>
                </>
            ) : (
                !noLogin && (
                    <div class="nav-item">
                        <Link href={prependBaseUrl('/login')}>Login</Link>
                    </div>
                )
            )}
        </nav>
    </header>
)