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[] = [
    {
      name: "Тарифы",
      url: "/tariffs",
      subMenu: [
        { name: "Тарифы на время", url: "/tariffs/time" },
        { name: "Тарифы на объём", url: "/tariffs/volume" },
        { name: "Кастомный тариф", url: "/tariffconstructor" },
      ],
    },
    { name: "Вопросы и ответы", url: "/faq" },
    { name: "Корзина", url: "/basket" },
  ];

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