"use client";
import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";

import { cn } from "@/lib/utils";

import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";
import { Button, buttonVariants } from "@/components/ui/button";
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
import {
	Sheet,
	SheetContent,
	SheetHeader,
	SheetTitle,
	SheetTrigger,
} from "@/components/ui/sheet";
import Link from "next/link";
import { deleteCookie, getCookie } from "cookies-next";
import { useEffect, useState } from "react";
import { ThemeSwitcher } from "./theme-switcher";

const subMenuItemsOne = [
	{
		title: "Blog",
		description: "The latest industry news, updates, and info",
		icon: <Book className="size-5 shrink-0" />,
	},
	{
		title: "Compnay",
		description: "Our mission is to innovate and empower the world",
		icon: <Trees className="size-5 shrink-0" />,
	},
	{
		title: "Careers",
		description: "Browse job listing and discover our workspace",
		icon: <Sunset className="size-5 shrink-0" />,
	},
	{
		title: "Support",
		description:
			"Get in touch with our support team or visit our community forums",
		icon: <Zap className="size-5 shrink-0" />,
	},
];

const subMenuItemsTwo = [
	{
		title: "Help Center",
		description: "Get all the answers you need right here",
		icon: <Zap className="size-5 shrink-0" />,
	},
	{
		title: "Contact Us",
		description: "We are here to help you with any questions you have",
		icon: <Sunset className="size-5 shrink-0" />,
	},
	{
		title: "Status",
		description: "Check the current status of our services and APIs",
		icon: <Trees className="size-5 shrink-0" />,
	},
	{
		title: "Terms of Service",
		description: "Our terms and conditions for using our services",
		icon: <Book className="size-5 shrink-0" />,
	},
];

const Navbar = () => {
	const [cookie, setCookie] = useState<string | null>(null);
	useEffect(() => {
		const _cookie = getCookie("auth_token");
		setCookie(_cookie?.toString() ?? null);
	}, []);
	return (
		<section className="sticky top-0 z-50 bg-background p-4">
			<div>
				<nav className="hidden justify-between lg:flex">
					<div className="flex items-center gap-6">
						<div className="flex items-center gap-2">
							<img
								src="https://shadcnblocks.com/images/block/block-1.svg"
								className="w-8"
								alt="logo"
							/>
							<span className="text-xl font-bold">
								Latosa-Escrima
							</span>
						</div>
						<div className="flex items-center">
							<Link
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "ghost",
									}),
								)}
								href="/"
							>
								Accueil
							</Link>
							<a
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "ghost",
									}),
								)}
								href="/planning"
							>
								Planning
							</a>
							<a
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "ghost",
									}),
								)}
								href="/about"
							>
								A propos
							</a>
							<a
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "ghost",
									}),
								)}
								href="/gallery"
							>
								Gallerie
							</a>
							<a
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "ghost",
									}),
								)}
								href="/blogs"
							>
								Blog
							</a>
						</div>
					</div>
					<div className="flex gap-2 animate-in ease-in-out">
						<ThemeSwitcher />
						{cookie ? (
							<Link
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "outline",
									}),
								)}
								href="/dashboard"
							>
								Compte
							</Link>
						) : (
							<Link
								className={cn(
									"text-muted-foreground",
									navigationMenuTriggerStyle,
									buttonVariants({
										variant: "outline",
									}),
								)}
								href="/login"
							>
								Se connecter
							</Link>
						)}
						{cookie ? (
							<Button
								onClick={() => {
									deleteCookie("auth_token");
									setCookie(null);
								}}
							>
								Se déconnecter
							</Button>
						) : (
							<Button>Créer un compte</Button>
						)}
					</div>
				</nav>
				<div className="block lg:hidden">
					<div className="flex items-center justify-between">
						<div className="flex items-center gap-2">
							<img
								src="https://shadcnblocks.com/images/block/block-1.svg"
								className="w-8"
								alt="logo"
							/>
							<span className="text-xl font-bold">
								Latosa-Escrima
							</span>
						</div>
						<div className="flex gap-2">
							<ThemeSwitcher />
							<Sheet>
								<SheetTrigger asChild>
									<Button variant="outline" size="icon">
										<Menu className="size-4" />
									</Button>
								</SheetTrigger>
								<SheetContent className="overflow-y-auto">
									<SheetHeader>
										<SheetTitle>
											<div className="flex items-center gap-2">
												<img
													src="https://shadcnblocks.com/images/block/block-1.svg"
													className="w-8"
													alt="logo"
												/>
												<span className="text-xl font-bold">
													Latosa-Escrima
												</span>
											</div>
										</SheetTitle>
									</SheetHeader>
									<div className="mb-8 mt-8 flex flex-col gap-4">
										<Link
											href="/"
											className="font-semibold"
										>
											Accueil
										</Link>
										<Link
											href="/planning"
											className="font-semibold"
										>
											Planning
										</Link>
										<Link
											href="/about"
											className="font-semibold"
										>
											À propos
										</Link>
										<Link
											href="/gallery"
											className="font-semibold"
										>
											Gallerie
										</Link>
										<Link
											href="/blog"
											className="font-semibold"
										>
											Blog
										</Link>
									</div>
									<div className="border-t pt-4">
										<div className="grid grid-cols-2 justify-start">
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Press
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Contact
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Imprint
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Sitemap
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Legal
											</a>
											<a
												className={cn(
													buttonVariants({
														variant: "ghost",
													}),
													"justify-start text-muted-foreground",
												)}
												href="#"
											>
												Cookie Settings
											</a>
										</div>
										<div className="mt-2 flex flex-col gap-3">
											<Button variant="outline">
												<Link href="/login">
													Se connecter
												</Link>
											</Button>
											<Button>Sign up</Button>
										</div>
									</div>
								</SheetContent>
							</Sheet>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};

export default Navbar;