import { useState } from "react"
import { Box, Typography, useTheme } from "@mui/material"
import { Link, useLocation } from "react-router-dom"

type MenuItem = {
  name: string;
  url: string;
  subMenu?: MenuItem[];
};

export default function Menu() {
	const [activeSubMenu, setActiveSubMenu] = useState<MenuItem[]>([])
	const theme = useTheme()
	const location = useLocation()

	const color = location.pathname === "/" ? "white" : "black"

	const arrayMenu: MenuItem[] = location.pathname === "/" ? [
		{ name: "Наши продукты", url: "/faq" },
		{ name: "Наши услуги", url: "/cart" }
	] : [
		{
			name: "Тарифы",
			url: "/tariffs",
			subMenu: [
				{ name: "Тарифы на время", url: "/tariffs/time" },
				{ name: "Тарифы на объём", url: "/tariffs/volume" },
				{ name: "Кастомный тариф", url: "/tariffconstructor" },
			],
		},
		{ name: "Вопросы и ответы", url: "/faq" },
		{ name: "Корзина", url: "/cart" },
		{ name: "Поддержка", url: "/support" },
		{ name: "История", url: "/history" },
	]


	return (
		<Box
			sx={{
				display: "flex",
				alignItems: "center",
				height: "100%",
				gap: "30px",
				overflow: "hidden",
				overflowX: "auto",
			}}
		>
			{location.pathname !== "/"
				? arrayMenu.map(({ name, url, subMenu = [] }) => (
					<Link
						key={name}
						style={{
							textDecoration: "none",
							height: "100%",
							display: "flex",
							alignItems: "center",
						}}
						to={url}
						onMouseEnter={() => setActiveSubMenu(subMenu)}
						state={{ previousUrl: location.pathname }}
					>
						<Typography
							color={
								location.pathname === url
									? theme.palette.purple.main
									: color
							}
							variant="body2"
							sx={{
								whiteSpace: "nowrap",
							}}
						>
							{name}
						</Typography>
					</Link>
				))
				: arrayMenu.map(({ name, url, subMenu = [] }, index) => (
					<Typography
						color={
							location.pathname === url
								? theme.palette.purple.main
								: color
						}
						variant="body2"
						sx={{
							whiteSpace: "nowrap",
						}}
					>
						{name}
					</Typography>
				))}
			<Box
				sx={{
					zIndex: "10",
					position: "absolute",
					top: "80px",
					left: 0,
					backgroundColor: theme.palette.background.paper,
					width: "100%",
				}}
				onMouseLeave={() => setActiveSubMenu([])}
			>
				{location.pathname !== "/" &&
          activeSubMenu.map(({ name, url }) => (
          	<Link key={name} style={{ textDecoration: "none" }} to={url}>
          		<Typography
          			color={
          				location.pathname === url
          					? theme.palette.purple.main
          					: color
          			}
          			variant="body2"
          			sx={{
          				padding: "15px",
          				whiteSpace: "nowrap",
          				paddingLeft: "185px",
          				"&:hover": {
          					color: theme.palette.purple.main,
          					background: theme.palette.background.default,
          				},
          			}}
          		>
          			{name}
          		</Typography>
          	</Link>
          ))}
			</Box>
		</Box>
	)
}