import { Container, SxProps, Theme } 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)`
    }
  },
  fullViewportContainer: {
    position: "fixed",
    top: 0,
    left: 0,
    height: "100vh",
    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"
  }
}))

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={<>{children}</>}
    />
  );
};

export default PageContainer;