"use client";

import { FC, PropsWithChildren, useEffect, useState } from "react";
import { SetupModeWarning } from "./SetupModeWarning";
import {
  AppBar as MuiAppBar,
  ToolbarProps,
  Box,
  Grid,
  IconButton,
  styled,
  Toolbar,
  Typography,
  Menu,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { Sidebar } from "./Sidebar";
import {
  ExpandCircleDown,
  MenuBookTwoTone,
  MenuSharp,
} from "@mui/icons-material";
import { fonts } from "@link-stack/ui";
import Image from "next/image";
import LinkLogo from "public/link-logo-small.png";
import { usePathname } from 'next/navigation';

interface InternalLayoutProps extends PropsWithChildren {
  setupModeActive: boolean;
  leafcutterEnabled: boolean;
}

export const InternalLayout: FC<InternalLayoutProps> = ({
  children,
  setupModeActive,
  leafcutterEnabled,
}) => {
  const { poppins } = fonts;

  const theme = useTheme();
  const mobile = useMediaQuery(theme.breakpoints.down("sm"));

  const [open, setOpen] = useState(false);
  const [openWidth, setOpenWidth] = useState<number>(0);
  const [closedWidth, setClosedWidth] = useState<number>(0);

  const pathname = usePathname();

  useEffect(() => {
    // On mobile, close menu when stuff is selected
    if (mobile) {
      setOpen(false);
    }
  }, [pathname]);

  useEffect(() => {
    setClosedWidth(mobile ? 0 : 70);
    setOpenWidth(270);
    setOpen(!mobile);
  }, [mobile]);

  interface HeaderBarProps extends ToolbarProps {
    open?: boolean;
  }

  const HeaderBar = styled(Toolbar, {
    shouldForwardProp: (prop) => prop !== "open",
  })<HeaderBarProps>(({ theme, open }) => ({
    backgroundColor: "#25272A",
    width: "100%",
    height: "56px",
  }));

  return (
    <Box sx={{ position: "relative" }}>
      <SetupModeWarning setupModeActive={setupModeActive} />
      <Grid container direction="row">
        {mobile ? (<MuiAppBar>
          <HeaderBar>
            <IconButton
              sx={{ color: "white" }}
              aria-label="open drawer"
              onClick={() => setOpen(true)}
            >
              <MenuSharp />
            </IconButton>
            <Typography
              variant="h2"
              sx={{
                fontSize: 26,
                color: "white",
                fontWeight: 700,
                fontFamily: poppins.style.fontFamily,
                flexGrow: 1,
              }}
            >
              CDR Link
            </Typography>
            <Box
              sx={{
                width: "40px",
                height: "40px",
                margin: open ? "0" : "0 auto",
              }}
            >
              <Image
                src={LinkLogo}
                alt="Link logo"
                width={40}
                height={40}
                style={{
                  objectFit: "cover",
                  filter: "grayscale(100) brightness(100)",
                }}
              />
            </Box>
          </HeaderBar>
        </MuiAppBar>) : (null)}
        <Sidebar
          open={open}
          setOpen={setOpen}
          openWidth={openWidth}
          closedWidth={closedWidth}
        />
        <Grid
          item
          sx={{
            mt: { xs: "56px", sm: "0" },
            ml: { xs: open ? "270px" : "0px", sm: open ? "270px" : "70px" },
            width: "100%",
            height: { xs: "calc(100vh - 56px)", sm: "100vh" },
            position: "relative",
          }}
        >
          {children as any}
        </Grid>
      </Grid>
    </Box>
  );
};