import React, { useState, Fragment } from "react";
import { useRouter } from "next/router";
import { Disclosure, Menu, Transition } from "@headlessui/react";
import {
  Bars3Icon,
  XMarkIcon,
  GlobeAltIcon,
} from "@heroicons/react/24/outline";
import Link from "next/link";

import { useTranslation } from "next-i18next";

const navigation = [
  { name: "header.people", href: "/people", current: false },
  { name: "header.events", href: "/events", current: false },
  { name: "header.archive", href: "/archive", current: false },
  { name: "header.donate", href: "/donate", current: false },
  { name: "header.location", href: "/location", current: false },
];

const links = [
  { href: "/account-settings", label: "Account settings" },
  { href: "/support", label: "Support" },
  { href: "/license", label: "License" },
  { href: "/sign-out", label: "Sign out" },
];

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function Header() {
  const { locale, locales, push } = useRouter();
  const { t: translate } = useTranslation();

  return (
    <Disclosure
      as="nav"
      className="bg-zinc-800 sticky z-50 top-0 w-full border-b border-zinc-700"
    >
      {({ open }) => (
        <>
          <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 ">
            <div className="relative flex h-16 items-center justify-between ">
              <div className="flex flex-1 items-center justify-between lg:items-stretch lg:justify-start">
                <div className="flex items-center lg:hidden">
                  {/* Mobile menu button*/}
                  <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-200 border border-zinc-700 hover:border-zinc-400 focus:outline-none transition ease-in">
                    <span className="sr-only">Open main menu</span>
                    {open ? (
                      <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
                    ) : (
                      <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
                    )}
                  </Disclosure.Button>
                </div>
                <div className="flex flex-shrink-0 items-center">
                  <Link href="/">
                    <p className="font-cooperBold text-white text-3xl mx-4 tracking-[.18em]">
                    AMSI
                    </p>
                  </Link>
                </div>

                <div className="hidden md:ml-6 lg:block">
                  <div className="flex justify-around space-x-4">
                    {navigation.map((item, index) => (
                      <Link
                        key={item.name}
                        href={item.href}
                        className="text-gray-300 hover:text-gray-100 hover:bg-zinc-700 rounded-md px-3 py-2 text-sm transition ease-in"
                        aria-current={item.current ? "page" : undefined}
                      >
                        {translate(item.name)}
                      </Link>
                    ))}
                  </div>
                </div>
              </div>

              <Menu
                as="div"
                className="hidden relative lg:inline-block text-left"
              >
                <div>
                  <Menu.Button className="inline-flex w-full justify-center gap-x-1.5 pl-3 py-2">
                    <GlobeAltIcon
                      className="block h-6 w-6 text-gray-300 hover:text-gray-100 cursor-pointer transition ease-in"
                      aria-hidden="true"
                    />
                  </Menu.Button>
                </div>

                <Transition
                  as={Fragment}
                  enter="transition ease-out duration-100"
                  enterFrom="transform opacity-0 scale-95"
                  enterTo="transform opacity-100 scale-100"
                  leave="transition ease-in duration-75"
                  leaveFrom="transform opacity-100 scale-100"
                  leaveTo="transform opacity-0 scale-95"
                >
                  <Menu.Items className="absolute right-0 z-10 mt-4 w-fit text-right origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                    <div className="py-1">
                      {locales.map((l) => (
                        <Menu.Item key={l}>
                          <Link href={""} key={l} locale={l}>
                            <p
                              className={classNames(
                                l === locale
                                  ? "bg-gray-100 text-gray-900 font-bold"
                                  : "text-gray-700 hover:text-gray-900 hover:bg-gray-200",
                                "block px-4 py-2 text-sm"
                              )}
                              key={l}
                            >
                              {translate(l)}
                            </p>
                          </Link>
                        </Menu.Item>
                      ))}
                    </div>
                  </Menu.Items>
                </Transition>
              </Menu>
              {/* <div className="absolute inset-y-0 right-0 items-center pr-2 sm:static sm:inset-auto sm:ml-6 lg:pr-0 hidden lg:flex">
                {locales.map((l) => (
                  <Link href={""} key={l} locale={l}>
                    <h4
                      className={classNames(
                        l === locale
                          ? "bg-zinc-200 text-gray-800"
                          : "text-gray-200 border border-zinc-500 hover:border-zinc-100",
                        "rounded-md mx-1 px-3 py-2 text-sm font-medium transition ease-in"
                      )}
                      key={l}
                    >
                      {translate(l)}
                    </h4>
                  </Link>
                ))}
              </div> */}
            </div>
          </div>

          <Disclosure.Panel className="lg:hidden">
            <div className="space-y-1 px-2 pb-3 pt-2 border-t border-zinc-700">
              {navigation.map((item) => (
                <Disclosure.Button
                  key={item.name}
                  as="a"
                  href={item.href}
                  className="block text-gray-300 hover:text-gray-100 hover:bg-zinc-700 text-sm rounded-md px-3 py-2 transition ease-in"
                  aria-current={item.current ? "page" : undefined}
                >
                  {translate(item.name)}
                </Disclosure.Button>
              ))}
            </div>
            <div className="border-t border-zinc-700"></div>
            {/* <div className="space-y-1 p-2">
              <div className="flex pl-2">
                {locales.map((l) => (
                  <div className="pr-4" key={l}>
                    <Link href={""} key={l} locale={l}>
                      <h4
                        className={classNames(
                          l === locale
                            ? "bg-zinc-200 text-gray-800"
                            : "text-gray-200 border border-zinc-500 hover:border-zinc-100",
                          "block rounded-md px-3 py-2 text-base text-sm transition ease-in"
                        )}
                        key={l}
                      >
                        {translate(l)}
                      </h4>
                    </Link>
                  </div>
                ))}
              </div>
            </div> */}
            <div className="space-y-1 p-2">
              <Menu as="div" className="relative inline-block text-left">
                <div>
                  <Menu.Button className="inline-flex w-full justify-center gap-x-1.5 pl-3">
                    <GlobeAltIcon
                      className="block h-6 w-6 text-gray-300 hover:text-gray-100 cursor-pointer transition ease-in"
                      aria-hidden="true"
                    />
                  </Menu.Button>
                </div>

                <Transition
                  as={Fragment}
                  enter="transition ease-out duration-100"
                  enterFrom="transform opacity-0 scale-95"
                  enterTo="transform opacity-100 scale-100"
                  leave="transition ease-in duration-75"
                  leaveFrom="transform opacity-100 scale-100"
                  leaveTo="transform opacity-0 scale-95"
                >
                  <Menu.Items className="absolute right-30 z-20 mt-4 w-fit origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                    <div className="py-1">
                      {locales.map((l) => (
                        <Menu.Item key={l}>
                          <Link href={""} key={l} locale={l}>
                            <p
                              className={classNames(
                                l === locale
                                  ? "bg-gray-100 text-gray-900 font-bold"
                                  : "text-gray-700 hover:text-gray-900 hover:bg-gray-200",
                                "block px-4 py-2 text-sm"
                              )}
                              key={l}
                            >
                              {translate(l)}
                            </p>
                          </Link>
                        </Menu.Item>
                      ))}
                    </div>
                  </Menu.Items>
                </Transition>
              </Menu>
            </div>
          </Disclosure.Panel>
        </>
      )}
    </Disclosure>
  );
}
