import type { JSX } from "react"

import Cookies from "js-cookie"
import { Monitor, Moon, Sun } from "lucide-react"
import { FunctionComponent } from "react"

import { useRouter } from "next/navigation"

import { useAppDispatch } from "@shared/hooks/useAppDispatch"
import { useAppSelector } from "@shared/hooks/useAppSelector"
import {
	ACCESS_TOKEN_COOKIE,
	REFRESH_TOKEN_COOKIE,
} from "@shared/lib/constants"
import { setThemePreference } from "@shared/store/appState"
import type { ThemePreference } from "@shared/store/appState/types"
import { resetUser } from "@shared/store/user"
import { Avatar } from "@shared/ui/Avatar"
import {
	Dropdown,
	DropdownContent,
	DropdownItem,
	DropdownRadioGroup,
	DropdownRadioItem,
	DropdownSeparator,
	DropdownSub,
	DropdownSubContent,
	DropdownSubTrigger,
	DropdownTrigger,
} from "@shared/ui/Dropdown"

import { navItems } from "./constants"
import { IUserDropdownProps } from "./UserDropdown.d"
import styles from "./UserDropdown.module.scss"

const themeOptions: { value: ThemePreference; label: string; icon: typeof Sun }[] = [
	{ value: "light", label: "Светлая", icon: Sun },
	{ value: "dark", label: "Тёмная", icon: Moon },
	{ value: "system", label: "Системная", icon: Monitor },
]

export const UserDropdown: FunctionComponent<IUserDropdownProps> = ({
	user,
}): JSX.Element => {
	const router = useRouter()
	const dispatch = useAppDispatch()
	const themePreference = useAppSelector(
		(state) => state.appState.themePreference,
	)

	const handleLogout = () => {
		Cookies.remove(ACCESS_TOKEN_COOKIE)
		Cookies.remove(REFRESH_TOKEN_COOKIE)
		dispatch(resetUser())
		router.push("/login")
	}

	return (
		<div className={styles.root} data-testid="UserDropdown">
			<Dropdown>
				<DropdownTrigger asChild>
					<div className={styles.trigger}>
						<Avatar size="small" url={user?.avatar || ""} />
						<span className={styles.username}>{user?.username}</span>
					</div>
				</DropdownTrigger>
				<DropdownContent>
					{navItems.map((item) => (
						<DropdownItem
							key={item.action}
							className={styles.item}
							onSelect={() => router.push(item.path)}
						>
							{item.label}
						</DropdownItem>
					))}

					<DropdownSeparator />

					<DropdownSub>
						<DropdownSubTrigger className={styles.item}>
							<Sun size={16} />
							Тема
						</DropdownSubTrigger>
						<DropdownSubContent>
							<DropdownRadioGroup
								value={themePreference}
								onValueChange={(v) =>
									dispatch(setThemePreference(v as ThemePreference))
								}
							>
								{themeOptions.map((opt) => (
									<DropdownRadioItem
										key={opt.value}
										value={opt.value}
										className={styles.themeItem}
									>
										<opt.icon size={16} />
										{opt.label}
									</DropdownRadioItem>
								))}
							</DropdownRadioGroup>
						</DropdownSubContent>
					</DropdownSub>

					<DropdownSeparator />

					<DropdownItem className={styles.item} onSelect={handleLogout}>
						Выйти
					</DropdownItem>
				</DropdownContent>
			</Dropdown>
		</div>
	)
}
