//* PACKAGES
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { Link } from "@inertiajs/react";
import React from "react";
//* THEME
import Logo from "$/uwil/Logo";
import SocialNetworks from "$/uwil/SocialNetworks";
import { cn } from "@/lib/utils";
import { FrontNavLinkProps } from "@/types/front";
import SearchInput from "../../Base/Inputs/SearchInput";

function ListItem({
  title,
  href,
  external,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & {
  href: string;
  external?: boolean;
}) {
  return (
    /* eslint-disable react/jsx-props-no-spreading */
    <li {...props}>
      <NavigationMenuLink asChild>
        {external ? (
          <a href={href} target="_blank" rel="noopener noreferrer">
            <div className="flex flex-col gap-1 text-sm py-1.5">
              <div className="leading-none font-medium">{title}</div>
            </div>
          </a>
        ) : (
          <Link href={href}>
            <div className="flex flex-col gap-1 text-sm py-1.5">
              <div className="leading-none font-medium">{title}</div>
            </div>
          </Link>
        )}
      </NavigationMenuLink>
    </li>
  );
}

export default function DesktopNav({
  navLinks,
}: {
  navLinks: FrontNavLinkProps[];
}) {
  return (
    <div className="hidden lg:block">
      <div className="flex items-center justify-between my-3 pr-3">
        <div>
          <SearchInput />
        </div>
        <SocialNetworks />
      </div>
      <nav className="flex items-center justify-between">
        <Logo className="w-[95px] h-auto" />
        <NavigationMenu viewport={false} className="uppercase">
          <NavigationMenuList className="gap-4">
            {navLinks.map((link) => {
              if (link.children) {
                return (
                  <NavigationMenuItem>
                    <NavigationMenuTrigger className="text-md font-bold  uppercase">
                      {link.title}
                    </NavigationMenuTrigger>
                    <NavigationMenuContent className="z-50">
                      <div className="flex items-start gap-8 justify-between">
                        <NavigationMenuLink
                          asChild
                          className={cn(
                            navigationMenuTriggerStyle(),
                            "text-sm font-semibold",
                          )}
                        >
                          <Link href={link.href}>{link.title}</Link>
                        </NavigationMenuLink>
                        <ul className="w-max list-disc pl-5 space-y-0.5">
                          {link.children.map((child) => {
                            return (
                              <ListItem
                                href={child.href ?? ""}
                                title={child.title}
                                external={child.external}
                              />
                            );
                          })}
                        </ul>
                      </div>
                    </NavigationMenuContent>
                  </NavigationMenuItem>
                );
              }
              return (
                <NavigationMenuItem>
                  <NavigationMenuLink
                    asChild
                    className={cn(
                      navigationMenuTriggerStyle(),
                      "text-md font-bold",
                    )}
                  >
                    {link.external ? (
                      <a
                        href={link.href}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        {link.title}
                      </a>
                    ) : (
                      <Link href={link.href}>{link.title}</Link>
                    )}
                  </NavigationMenuLink>
                </NavigationMenuItem>
              );
            })}
          </NavigationMenuList>
        </NavigationMenu>
      </nav>
    </div>
  );
}