"use client";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import MenuIcon from "@mui/icons-material/Menu";
import { Box, Drawer, IconButton, Stack, styled, Toolbar, Typography, useMediaQuery, useTheme } from "@mui/material";
import MuiAppBar from "@mui/material/AppBar";
import { useState, useEffect } from "react";
import HeaderMenu from "./HeaderMenu";
import moment from "jalali-moment";
import { headerMenu } from "@/core/utils/headerMenu";
import SidebarMenu from "./Sidebar/SidebarMenu";

const drawerWidth = 300;
const headersHeight = 136;

const Main = styled(Stack, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
    flexGrow: 1,
    height: "100%",
    transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: `-${drawerWidth}px`,
    ...(open && {
        transition: theme.transitions.create("margin", {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
        marginLeft: 0,
    }),
}));

const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
    transition: theme.transitions.create(["margin", "width"], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open && {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: `${drawerWidth}px`,
        transition: theme.transitions.create(["margin", "width"], {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
    }),
}));

const DrawerHeader = styled("div")(({ theme }) => ({
    display: "flex",
    alignItems: "center",
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
    minHeight: "40px !important",
    justifyContent: "flex-end",
}));

const HeaderWithSidebar = ({ children }) => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("md")); // Detect mobile/tablet screen
    const [open, setOpen] = useState(!isMobile); // Initial state based on screen size

    useEffect(() => {
        setOpen(!isMobile); // Toggle state when screen size changes
    }, [isMobile]);

    const now = moment().locale("fa").format("YYYY/MM/DD");

    const handleDrawerOpen = () => {
        setOpen(true);
    };
    const handleDrawerClose = () => {
        setOpen(false);
    };

    return (
        <Box
            sx={{
                display: "flex",
                height: `calc(100% - ${headersHeight}px)`,
                width: "100%",
                mt: `${headersHeight}px`,
            }}
        >
            <AppBar sx={{ position: "fixed", top: "unset" }} elevation={0} open={open}>
                <Toolbar variant="dense" sx={{ minHeight: 40 }}>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerOpen}
                        edge="start"
                        sx={{ mr: 2, ...(open && { display: "none" }) }}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Box
                        sx={{
                            flexGrow: 1,
                            display: "flex",
                            overflowX: "auto",
                            whiteSpace: "nowrap",
                            scrollbarWidth: "none",
                            "&::-webkit-scrollbar": {
                                display: "none",
                            },
                        }}
                    >
                        {headerMenu.map((menu) => (
                            <HeaderMenu key={menu.title} menu={menu} />
                        ))}
                    </Box>
                </Toolbar>
            </AppBar>
            <Drawer
                sx={{
                    height: "100%",
                    width: drawerWidth,
                    flexShrink: 0,
                    "& .MuiDrawer-paper": {
                        overflow: "hidden",
                        width: drawerWidth,
                        boxSizing: "border-box",
                        borderTop: 1,
                        borderTopColor: "divider",
                        position: "inherit",
                    },
                }}
                variant="persistent"
                anchor="left"
                open={open}
            >
                <DrawerHeader sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <Typography variant="subtitle2" color="#757575" sx={{ px: 1 }}>
                        تاریخ امروز: {now}
                    </Typography>
                    <IconButton onClick={handleDrawerClose}>
                        <ChevronRightIcon />
                    </IconButton>
                </DrawerHeader>
                <SidebarMenu />
                <Typography textAlign={"center"} variant="caption" sx={{ py: 0.2, fontFamily: "sans-serif" }}>
                    v{process.env.NEXT_PUBLIC_VERSION}
                </Typography>
            </Drawer>
            <Main open={open} sx={{ height: "100%", width: "100%", overflow: "hidden" }}>
                <DrawerHeader />
                <Box sx={{ height: "100%", width: "100%", overflowY: "auto", p: 1, overflowX: "hidden" }}>
                    {children}
                </Box>
            </Main>
        </Box>
    );
};

export default HeaderWithSidebar;