import { useContext } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import User from './user'
import UserContext from './user/context'
import { USER_ROLE } from '../lib/session'

const pathNameLabelMap = {
  '/admin/login': 'Login',
  '/admin': 'Buchungsübersicht',
  '/admin/booking/[uuid]': 'Buchung Bearbeiten',
  '/admin/booking/[uuid]/bill': 'Buchung Rechnungsstellung',
  '/book': 'Buchungsanfrage',
  '/booking/[uuid]': 'Ihre Buchung',
  '/booking/[uuid]/stored': 'Buchungsanfrage angenommen',
}

function getPathNameMap(route: string) {
  const name = pathNameLabelMap[route]

  return name || route
}

export default function Navigation() {
  const router = useRouter()
  const { role } = useContext(UserContext)

  const pathname = router.pathname
  if (pathname.length === 0 || pathname === '/') {
    return null
  }

  const pathLabel = getPathNameMap(pathname)
  const path = router.asPath

  return (
    <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
      <>
        <h2 className="mr-1">
          <Link href="/">
            <a className="font-extrabold">Home</a>
          </Link>
        </h2>
        {'>'}
        <h2 className="mx-1">
          <Link href={path}>
            <a className="font-extrabold">{pathLabel}</a>
          </Link>
        </h2>
        {role === USER_ROLE.ADMIN && (
          <Link href="/admin">
            <a className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
              Buchungen
            </a>
          </Link>
        )}
        <div className="flex-grow" />
        <User />
      </>
    </div>
  )
}