import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import {ThemeSwitch} from "../core/ThemeSwitch";
import Divider from "@mui/material/Divider";
import {renderNavItems} from "./NavItem";
import {navItems} from "../../navItems";
import React, {useEffect, useState} from "react";
import {useLocation} from "react-router-dom";
import {useUser} from "../../hooks/useUser";

export function NavigationMenu() {
    const location = useLocation();
    const pathname = location.pathname;
    const {user} = useUser();
    const [items, setItems] = useState(null)

    useEffect(() => {
        const newState = (
            <Box component="nav" sx={{flex: '1 1 auto', p: '12px'}}>
                {renderNavItems({items: navItems, pathname: pathname, direction: 'column'})}
            </Box>
        )
        setItems(newState)
        // eslint-disable-next-line
    }, [user, pathname]);

    return (
        <>
            {/*верхняя стопка*/}
            <Stack spacing={2} sx={{p: 2, height: '63px'}}>
                <ThemeSwitch/>
            </Stack>
            <Divider sx={{borderColor: 'var(--mui-palette-neutral-700)'}}/>
            {/*меню навигации*/}
            {items}
        </>
    )
}