import { useState } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import User from './user'

const NAV_ENTRIES = [
  {
    label: 'Home',
    href: '/',
  },
  {
    label: 'Buchungsanfrage',
    href: '/book',
  },
  {
    label: 'Preise',
    href: '/prices',
  },
  {
    label: 'Mietbedingungen',
    href: '/terms',
  },
]

export default function Header() {
  const router = useRouter()
  const [hamburgerOpen, setHamburgerOpen] = useState(false)

  function changeRoute(event: React.PointerEvent<HTMLAnchorElement>) {
    event.preventDefault()
    setHamburgerOpen(false)
    router.push(event.currentTarget.href)
  }

  return (
    <>
      <Head>
        <title>Pfadi-Bussle</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="relative flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
            <div className="flex justify-start lg:w-0 flex-1">
              <Link href="/" className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
                Pfadi-Bussle
              </Link>
            </div>
            <nav className="hidden space-x-10 sm:flex items-center">
              {NAV_ENTRIES.map(({ label, href }) => {
                return (
                  <a
                    key={href}
                    href={href}
                    onClick={changeRoute}
                    className="text-base font-medium text-gray-500 hover:text-gray-900"
                  >
                    {label}
                  </a>
                )
              })}
              <User />
            </nav>
            <nav
              onClick={() => setHamburgerOpen(!hamburgerOpen)}
              className="flex flex-col items-center sm:hidden text-gray-500 hover:text-gray-900 cursor-pointer"
            >
              <svg
                className="w-5"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
              <div
                className={`${hamburgerOpen || 'hidden'
                  } absolute z-10 mt-5 transform right-0`}
              >
                <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                  <div className="relative grid gap-2 bg-white px-4 py-2">
                    {NAV_ENTRIES.map(({ label, href }) => {
                      return (
                        <a
                          key={href}
                          href={href}
                          onClick={changeRoute}
                          className="text-base font-medium text-gray-500 hover:text-gray-900"
                        >
                          {label}
                        </a>
                      )
                    })}
                    <User />
                  </div>
                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </>
  )
}