import {
  Navbar as NextUINavbar,
  NavbarContent,
  NavbarMenu,
  NavbarMenuToggle,
  NavbarItem,
  NavbarMenuItem,
} from "@nextui-org/navbar";
import { Input } from "@nextui-org/react";
import { Link } from "@nextui-org/link";
import { siteConfig } from "@/config/site";
import NextLink from "next/link";
import clsx from "clsx";
import { User } from "@nextui-org/react";
import { getUser } from "./../server/utils/auth";
import { SearchIcon, SmallLogo } from "@/components/icons";

export const Navbar = async () => {
  const user = await getUser();

  return (
    <NextUINavbar
      maxWidth="xl"
      position="sticky"
      className="bg-transparent blur-none backdrop-blur-none"
    >
      <NavbarContent className="flex justify-between items-center mx-4">
        <ul className="hidden lg:flex gap-16 uppercase justify-start center">
          {siteConfig.navItems.map((item) => (
            <NavbarItem key={item.href}>
              <NextLink
                className={`${clsx(
                  "font-clean",
                  "data-[active=true]:text-opacity-100 data-[active=true]:font-medium",
                  "rounded-md p-2 transition-colors duration-800",
                  "text-white",
                  "text-opacity-60",
                  "text-base",
                  "font-semibold",
                  "uppercase",
                  "tracking-widest",
                  "hover:text-opacity-80"
                )}`}
                href={item.href}
              >
                {item.label}
              </NextLink>
            </NavbarItem>
          ))}
        </ul>
        <div className="flex items-center">
          <Input
            classNames={{
              base: "max-w-full h-10 w-52 mx-8",
              mainWrapper: "h-full",
              input: "text-small",
              inputWrapper:
                "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20 bg-transparent",
            }}
            placeholder="SEARCH"
            size="md"
            startContent={
              <SearchIcon size={18} width={undefined} height={undefined} />
            }
            type="search"
            style={{
              fontWeight: "500",
              fontFamily: "Nunito Sans 7pt",
            }}
          />

          {user ? (
            <NavbarItem className="mx-16">
              <a href="/profile" className="cursor-pointer">
                <User
                  isFocusable
                  name={user.username}
                  description={user.rank}
                  avatarProps={{
                    src: user.avatar,
                  }}
                />
              </a>
            </NavbarItem>
          ) : (
            <NavbarItem className="">
              <NextLink href="/login">
                <button
                  className={`${clsx(
                    "cursor-pointer",
                    "font-clean",
                    "text-white",
                    "text-opacity-60",
                    "text-base",
                    "font-semibold",
                    "uppercase",
                    "tracking-widest",
                    "hover:text-opacity-80"
                  )}`}
                >
                  Login
                </button>
              </NextLink>
              <NextLink href="/register">
                <button
                  className={`${clsx(
                    "cursor-pointer mx-8",
                    "font-clean",
                    "text-white",
                    "text-opacity-60",
                    "text-base",
                    "font-semibold",
                    "uppercase",
                    "tracking-widest",
                    "hover:text-opacity-80"
                  )}`}
                >
                  Register
                </button>
              </NextLink>
            </NavbarItem>
          )}
        </div>
      </NavbarContent>

      <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
        <NavbarMenuToggle />
      </NavbarContent>

      <NavbarMenu>
        <div className="mx-4 mt-2 flex flex-col gap-6">
          {siteConfig.navMenuItems.map((item, index) => (
            <NavbarMenuItem key={`${item}-${index}`}>
              <Link
                color="foreground"
                href="#"
                size="lg"
                style={{
                  fontFamily: "Nunito Sans 7pt",
                }}
              >
                {item.label}
              </Link>
            </NavbarMenuItem>
          ))}
        </div>
      </NavbarMenu>
    </NextUINavbar>
  );
};