"use client"

import type { JSX } from "react"

import { FolderKanban, Home, Menu as MenuIcon } from "lucide-react"
import dynamic from "next/dynamic"
import Link from "next/link"
import { FunctionComponent, useState } from "react"

const NavigationDrawer = dynamic(
	() => import("@entities/NavigationDrawer").then((m) => m.NavigationDrawer),
	{ ssr: false },
)
import { UserDropdown } from "@entities/UserDropdown"
import { NotificationBell } from "@features/notifications"
import { useBreadcrumbItems } from "@shared/context/BreadcrumbsContext"
import { useAppSelector } from "@shared/hooks/useAppSelector"
import { Button } from "@shared/ui"

import { IHeaderProps } from "./Header.d"
import styles from "./Header.module.scss"

export const Header: FunctionComponent<IHeaderProps> = (): JSX.Element => {
	const userData = useAppSelector((state) => state.user.user)
	const breadcrumbs = useBreadcrumbItems()

	const [isDrawerOpen, setIsDrawerOpen] = useState(false)

	return (
		<>
			<header className={styles.root} data-testid="Header">
				<div className={styles.start}>
					<Button variant="icon" onClick={() => setIsDrawerOpen(true)}>
						<MenuIcon size={24} />
					</Button>
					<div className={styles.screenPath}>
						<h1
							className={styles.brandTitle}
							onClick={() => setIsDrawerOpen(true)}
						>
							Coffee Project
						</h1>
						{breadcrumbs.map((item, index) => (
							<span key={index} className={styles.breadcrumbSegment}>
								<span className={styles.separator}>/</span>
								{item.href ? (
									<Link href={item.href} className={styles.breadcrumbLink}>
										{item.label}
									</Link>
								) : (
									<span className={styles.screenName}>{item.label}</span>
								)}
							</span>
						))}
					</div>
				</div>
				<div className={styles.end}>
					<NotificationBell />
					<UserDropdown user={userData} />
				</div>
			</header>
			<NavigationDrawer
				open={isDrawerOpen}
				onClose={() => setIsDrawerOpen(false)}
				buttons={[
					{
						label: "Главная",
						icon: Home,
						path: "/",
					},
					{
						label: "Проекты",
						icon: FolderKanban,
						path: "/projects",
					},
				]}
			/>
		</>
	)
}
