import { Container, SxProps, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import classNames from "classnames";
// import { useMobile } from "hooks";
import { PropsWithChildren } from "react";

const useStyles = makeStyles((theme: Theme) => ({
  pageContainer: {
    width: "100%",
    overflowX: "hidden",
    overflowY: "auto",
    // height: `calc(100vh - 112px)`,
    // [theme.breakpoints.up("sm")]: {
    //   height: `calc(100vh - 64px)`
    // }
    minHeight: 0,
    height: `calc(100vh - 112px)`,
    "@supports (height: 100dvh)": {
      height: `calc(100dvh - 112px)`
    },
    [theme.breakpoints.up("sm")]: {
      height: `calc(100vh - 64px)`,

      "@supports (height: 100dvh)": {
        height: `calc(100dvh - 64px)`
      }
    }
  },
  fullViewportContainer: {
    position: "fixed",
    top: 0,
    left: 0,
    height: "100vh",
    "@supports (height: 100dvh)": {
      height: "100dvh"
    },
    width: "100vw",
    backgroundColor: theme.palette.background.default,
    zIndex: 2000,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  centerCenter: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  buildInfo: {
    position: "fixed" as const,
    bottom: 56,
    left: 8,
    fontSize: 10,
    lineHeight: 1.3,
    opacity: 0.35,
    color: theme.palette.text.secondary,
    pointerEvents: "none" as const,
    zIndex: 1,
    [theme.breakpoints.up("sm")]: {
      bottom: 8,
    },
    [theme.breakpoints.up("md")]: {
      left: `calc(${theme.spacing(9)} + 8px)`,
    }
  }
}))

interface Props extends PropsWithChildren{
  fullViewport?: boolean;
  isCenterCenter?: boolean;
  sx?: SxProps<Theme>;
  spacing?: number;
}

export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
  const classes = useStyles();
  // const isMobile = useMobile();
  const { children, fullViewport, isCenterCenter, sx } = props;
  // let fullViewport = false
  // let isCenterCenter = false
  const spacing = props.spacing ?? 0;
  return (
    <Container
      className={classNames(
        fullViewport ? classes.fullViewportContainer : classes.pageContainer,
        isCenterCenter && classes.centerCenter
      )}
      sx={{
        ...sx, // Spread existing sx
        paddingX: spacing,
        marginTop: spacing
        // ...(padding !== undefined && { padding }), // Conditionally add padding
      }}
      disableGutters
      maxWidth={false}
    >
      {children}
      <Typography component="div" className={classes.buildInfo}>
        {new Date(__BUILD_DATE__).toLocaleDateString()}<br />
        {__GIT_HASH__}
      </Typography>
    </Container>
  );
};

export default PageContainer;