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: "/faq" },
    { name: "Наши услуги", url: "/cart" }
  ];

  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>
  );
}