'use client'

import {
	Navbar as NextUINavbar,
	NavbarContent,
	NavbarMenu,
	NavbarMenuToggle,
	NavbarBrand,
	NavbarItem,
	NavbarMenuItem,
} from '@nextui-org/navbar'
import {
	Dropdown,
	DropdownMenu,
	DropdownItem,
	DropdownTrigger,
} from '@nextui-org/dropdown'
import { Avatar, AvatarIcon } from '@nextui-org/avatar'
import { Link } from '@nextui-org/link'

import { link as linkStyles } from '@nextui-org/theme'

import { siteConfig } from '@/config/site'
import NextLink from 'next/link'
import clsx from 'clsx'

import { ThemeSwitch } from '@/components/theme-switch'
import { GithubIcon } from '@/components/icons'

import { Icon } from '@iconify/react'
import NewBookmarkForm from '@/components/newBookmarkForm'
import { usePathname, useRouter } from 'next/navigation'
import { BookmarkCategory, User } from '@/types'
import { useContext } from 'react'
import { BookmarkCategoryContext } from '@/app/providers'

export const Navbar = ({
	user,
	categories,
}: {
	user: User | null
	categories: BookmarkCategory[]
}) => {
	const pathname = usePathname()

	if (pathname.startsWith('/login') || pathname.startsWith('/signup')) {
		return <></>
	}

	const { setSelectedCategory } = useContext(BookmarkCategoryContext)

	return (
		<NextUINavbar
			maxWidth='xl'
			position='sticky'>
			<NavbarContent
				className='basis-1/5 sm:basis-full'
				justify='start'>
				<NavbarMenuToggle className='' />
				<NavbarBrand
					as='li'
					className='max-w-fit gap-3'>
					<NextLink
						className='hidden items-center justify-start gap-1 sm:flex'
						href='/'>
						<Icon
							icon={'mdi:bookmark-box'}
							fontSize={32}
						/>
						<p className='font-bold text-inherit'>Dashboard</p>
					</NextLink>
				</NavbarBrand>
				<ul className='ml-2 hidden justify-start gap-4 md:flex'>
					{siteConfig.navItems.map((item) => (
						<NavbarItem key={item.href}>
							<NextLink
								className={clsx(
									linkStyles({ color: 'foreground' }),
									'data-[active=true]:font-medium data-[active=true]:text-primary'
								)}
								color='foreground'
								href={item.href}>
								{item.label}
							</NextLink>
						</NavbarItem>
					))}
					<NavbarItem>
						<Dropdown>
							<DropdownTrigger>Category</DropdownTrigger>
							<DropdownMenu>
								{categories.length > 0 ? (
									categories.map((category) => (
										<DropdownItem
											key={category.name}
											onPress={() =>
												setSelectedCategory(
													category.id.toString()
												)
											}>
											{category.name}
										</DropdownItem>
									))
								) : (
									<DropdownItem key='empty'>
										Nothing Here
									</DropdownItem>
								)}
							</DropdownMenu>
						</Dropdown>
					</NavbarItem>
				</ul>
			</NavbarContent>

			<NavbarContent
				className='flex basis-full'
				justify='end'>
				<NavbarItem className='flex gap-2'>
					{pathname.startsWith('/dashboard') && (
						<div className='mr-4'>
							<NewBookmarkForm categories={categories} />
						</div>
					)}
					<Link
						isExternal
						href={siteConfig.links.github}
						aria-label='Github'
						className='hidden sm:flex'>
						<GithubIcon className='text-default-500' />
					</Link>
					<ThemeSwitch className='hidden min-[330px]:flex' />
					<div className='ml-2 flex items-center gap-4 min-[330px]:ml-4'>
						<UserAvatar user={user} />
					</div>
				</NavbarItem>
			</NavbarContent>

			<NavbarMenu>
				<div className='mx-4 mt-2 flex flex-col gap-2'>
					{siteConfig.navMenuItems.map((item, index) => (
						<NavbarMenuItem key={`${item}-${index}`}>
							<Link
								color={
									index === 2
										? 'primary'
										: index ===
										  siteConfig.navMenuItems.length - 1
										? 'danger'
										: 'foreground'
								}
								href={item.href}
								size='lg'>
								{item.label}
							</Link>
						</NavbarMenuItem>
					))}
				</div>
			</NavbarMenu>
		</NextUINavbar>
	)
}

function UserAvatar({ user }: { user: User | null }) {
	const router = useRouter()

	const logout = async () => {
		const response = await fetch('/api/auth/logout', {
			method: 'POST',
		})
		router.refresh()
	}

	const login = () => {
		router.push('/login')
	}

	return (
		<Dropdown placement='bottom-end'>
			<DropdownTrigger>
				<Avatar
					isBordered
					as='button'
					className='transition-transform'
					icon={<AvatarIcon />}
				/>
			</DropdownTrigger>
			<DropdownMenu
				aria-label='Profile Actions'
				variant='flat'>
				<DropdownItem
					key='profile'
					className='h-14 gap-2'>
					<p className='font-semibold'>Signed in as</p>
					<p className='font-semibold text-primary'>
						{user ? user.email : 'Guest'}
					</p>
				</DropdownItem>
				{user ? (
					<DropdownItem
						key='logout'
						color='danger'
						className='text-danger'
						onPress={() => logout()}>
						Log Out
					</DropdownItem>
				) : (
					<DropdownItem
						key='login'
						color='primary'
						onPress={() => login()}>
						Login
					</DropdownItem>
				)}
			</DropdownMenu>
		</Dropdown>
	)
}