import LogoDark from "@/common/assets/images/logo/dark.webp";
import LogoLight from "@/common/assets/images/logo/light.webp";

import {AppBar, Button, CircularProgress, IconButton, Link, Stack, Typography, useMediaQuery, useTheme} from "@mui/material";
import {Menu} from "@mui/icons-material";
import {useNavigate} from "react-router-dom";
import routes from "@/common/routes";
import {useEffect, useState} from "react";

const NAVBAR_HEIGHT = 80;

export const Navigation = () => {
    const navigate = useNavigate();

    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("lg"));
    const isDarkMode = theme.palette.mode === "dark";

    const [dashboardLoading, setDashboardLoading] = useState(false);

    const openDashboard = () => {
        setDashboardLoading(true);
        const timeout = setTimeout(() => window.location.replace("https://dash.licenseapi.de"), 500);
        return () => clearTimeout(timeout);
    }

    return (
        <AppBar position="fixed" sx={{height: NAVBAR_HEIGHT, boxShadow: "none", justifyContent: "center",
            backgroundColor: isDarkMode ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)",
            backdropFilter: "blur(5px)", WebkitBackdropFilter: "blur(5px)"
        }}>
            <Stack direction="row" alignItems="center" justifyContent="space-evenly" flexWrap="wrap">
                <img src={isDarkMode ? LogoDark : LogoLight} alt="Logo" height={NAVBAR_HEIGHT / 2}
                        onClick={() => navigate("/")} style={{cursor: "pointer"}}/>

                {!isMobile && <>
                    <Stack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap">
                        {routes.map((route, index) => <Link key={index} underline="none" sx={{cursor: "pointer"}}
                                                            onClick={() => navigate(route.path)}>
                            <Typography variant="h5" sx={{mx: 2}} fontWeight={600}
                                        color={route.path === window.location.pathname ? "primary.main" : "text.primary"}>
                                {route.name}
                            </Typography>
                        </Link>)}
                    </Stack>

                    <Button variant="contained" onClick={openDashboard} disabled={dashboardLoading}>{dashboardLoading
                        && <CircularProgress size={18} color="inherit" sx={{mr: 1}}/>} Dashboard</Button>
                </>}

                {isMobile && <>
                    <IconButton onClick={() => console.log("Menu")} sx={{mx: 2}}>
                        <Menu/>
                    </IconButton>
                </>}

            </Stack>
        </AppBar>
    )
}