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, logout } from "./../server/utils/auth";
import { SearchIcon } from "@/components/icons";
import { useState, useEffect } from "react";
import { fetchDiscordInfo } from "../server/utils/data";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownSection,
  DropdownItem,
} from "@nextui-org/dropdown";
import { useRouter } from "next/navigation";

import { useToast } from "@/components/ui/use-toast";

export const Navbar = () => {
  const router = useRouter();
  const { toast } = useToast();
  const [user, setUser] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const userData = await getUser();
      console.log(userData);
      const discordData = await fetchDiscordInfo();
      setUser(userData);
      //@ts-ignore
      setData(discordData);
    };

    fetchUser();
  }, []);

  const handleLogout = async () => {
    const res = await logout();

    if (res === true) {
      router.push("/");

      toast({
        variant: "default",
        title: "Successfully logged out!",
      });
    } else {
      toast({
        variant: "destructive",
        title: "Logout Failed",
        description: "Please try again later!",
      });
    }
  };

  return (
    <NextUINavbar
      maxWidth="xl"
      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 color
                  "text-opacity-60", // Text opacity
                  "text-base", // Font size
                  "font-semibold", // Font weight
                  "uppercase", // Text transform
                  "tracking-widest", // Letter spacing
                  "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 ? (
            <Dropdown>
              <DropdownTrigger>
                <NavbarItem className="mx-16">
                  <a className="cursor-pointer">
                    <User
                      isFocusable
                      //@ts-ignore
                      name={user.username}
                      //@ts-ignore
                      description={user.rank}
                      avatarProps={{
                        //@ts-ignore
                        src: user.avatar,
                      }}
                    />
                  </a>
                </NavbarItem>
              </DropdownTrigger>
              <DropdownMenu aria-label="Static Actions">
                <DropdownSection showDivider>
                  <DropdownItem
                    href={"/profile"}
                    key="new"
                    startContent={
                      <svg
                        className="shrink-0 w-6 aspect-square fill-sky-300"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 640 512"
                      >
                        <path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
                      </svg>
                    }
                  >
                    My Profile
                  </DropdownItem>

                  <DropdownItem
                    href={"/settings"}
                    key="new"
                    startContent={
                      <svg
                        className="shrink-0 w-6 aspect-square fill-sky-300"
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 640 512"
                      >
                        <path d="M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.9 8.4 167.2 8 160.4 8h-.7c-6.8 0-13.5 .4-20.1 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM112 176a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 304a48 48 0 1 1 0 96 48 48 0 1 1 0-96z" />
                      </svg>
                    }
                  >
                    Settings
                  </DropdownItem>
                </DropdownSection>

                <DropdownItem
                  key="new"
                  onClick={handleLogout}
                  className="text-danger"
                  startContent={
                    <svg
                      className="shrink-0 w-6 aspect-square fill-sky-300"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 640 512"
                    >
                      <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z" />
                    </svg>
                  }
                >
                  Logout
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          ) : (
            <NavbarItem className="">
              <NextLink href="/login">
                <button
                  className={`${clsx(
                    "cursor-pointer",
                    "font-clean",
                    "text-white", // Text color
                    "text-opacity-60", // Text opacity
                    "text-base", // Font size
                    "font-semibold", // Font weight
                    "uppercase", // Text transform
                    "tracking-widest", // Letter spacing
                    "hover:text-opacity-80"
                  )}`}
                >
                  Login
                </button>
              </NextLink>
              <NextLink href="/register">
                <button
                  className={`${clsx(
                    "cursor-pointer mx-8",
                    "font-clean",
                    "text-white", // Text color
                    "text-opacity-60", // Text opacity
                    "text-base", // Font size
                    "font-semibold", // Font weight
                    "uppercase", // Text transform
                    "tracking-widest", // Letter spacing
                    "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>
  );
};