import React, { memo } from "react";
import { useNavigate } from "react-router-dom";

import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import Stack from "@mui/material/Stack";
import { styled } from "@mui/material/styles";
import { useMediaQuery } from "@mui/system";

import { LogoType, NavigationOverrides } from "../../types";

import Branding from "./Branding";
import NavRailRoutes from "./NavRailRoutes";
import User from "./User";

const RAIL_WIDTH = 80;
const RAIL_HEIGHT = 80;

export interface NavRailProps {
  navigation: NavigationOverrides;
  logo?: LogoType;
  title?: string;
  subtitle?: string;
  version?: string;
}

const StyledDrawer = styled(Drawer)(({ theme }) => ({
  "& .MuiDrawer-paper": {
    backgroundColor:
      theme.palette.mode === "light" ? theme.palette.primary.main : theme.palette.primary.dark,
    color: theme.palette.primary.contrastText,
  },
}));

export const NavRail: React.FC<NavRailProps> = ({ navigation, logo, title, subtitle, version }) => {
  const navigate = useNavigate();
  const navigateHome = () => navigate("/", { replace: true });
  const isHorizontal = useMediaQuery("(max-width:640px)"); // Switch layout based on screen size

  return (
    <StyledDrawer
      anchor={isHorizontal ? "bottom" : "left"}
      elevation={0}
      hideBackdrop={true}
      PaperProps={{
        sx: {
          bgcolor: "transparent",
          borderRight: { sm: "unset" },
          borderBottom: { xs: "unset" },
        },
        className: "BananasNavRail-paper",
      }}
      sx={{
        flexShrink: 0,
        whiteSpace: "nowrap",
        boxSizing: "border-box",
        width: { xs: "100%", sm: RAIL_WIDTH },
        height: { xs: 0, sm: "100%" },
        "& .MuiDrawer-paper": {
          width: { xs: "100%", sm: RAIL_WIDTH },
          height: { xs: RAIL_HEIGHT, sm: "100%" },
          display: "flex",
          flexDirection: { xs: "row", sm: "column" }, // Responsive flex direction
        },
      }}
      variant="permanent"
    >
      <Stack
        direction={{ xs: "row", sm: "column" }}
        gap={0}
        justifyContent="center"
        sx={{
          flexGrow: { xs: 1, sm: 1 },
          flexShrink: { xs: 1, sm: 0 },
        }}
      >
        {!isHorizontal && ( // TODO: Actually support horizontal layout
          <Branding
            fullWidth={!isHorizontal}
            logo={logo}
            subtitle={subtitle}
            title={title}
            version={version}
            onClick={navigateHome}
          />
        )}

        <Stack
          direction={{ xs: "row", sm: "column" }}
          gap={0}
          mt={{ xs: 0, sm: 2 }}
          sx={{ overflowY: { xs: "auto", sm: "none" } }}
        >
          <NavRailRoutes navigation={navigation} />
        </Stack>

        <Box sx={{ ml: { xs: "auto", sm: "unset" }, mt: { xs: "unset", sm: "auto" } }}>
          <User />
        </Box>
      </Stack>
    </StyledDrawer>
  );
};

export default memo(NavRail);