import React from "react";

import { Grid2 as Grid, Grid2Props, Stack, StackProps, SxProps } from "@mui/material";

import { ss } from "../util/select_styles";

const commonStyles: SxProps = {
  bgcolor: "background.default",
  position: "relative",
  padding: { xs: 1, sm: 3 },
  paddingBottom: { xs: 14, sm: 4 },
};

interface ContentProps extends React.PropsWithChildren<Omit<Grid2Props, "sx">> {
  layout: "fullWidth" | "fixedWidth";
  sx?: SxProps;
}

const MAX_WIDTH = 1300;

export const Content: React.FC<ContentProps> = ({ layout, sx, children, ...props }) => {
  switch (layout) {
    case "fullWidth":
      return (
        <Grid container pb={10} sx={ss(commonStyles, sx, { width: "100%" })} {...props}>
          <Grid size={12}>
            <Stack spacing={2}>{children}</Stack>
          </Grid>
        </Grid>
      );

    case "fixedWidth":
      return (
        <Grid
          container
          pb={10}
          spacing={2}
          sx={ss(commonStyles, {
            maxWidth: MAX_WIDTH,
            width: "100%",
            mr: "auto",
            ...sx,
          })}
          {...props}
        >
          {children}
        </Grid>
      );
  }
};

export interface ColumnProps extends React.PropsWithChildren<Omit<Grid2Props, "size">> {
  stackProps?: StackProps;
}

export const LeftColumn: React.FC<ColumnProps> = ({ children, stackProps, ...props }) => (
  <Grid size={{ xs: 12, md: 8 }} {...props}>
    <Stack {...stackProps} spacing={2}>
      {children}
    </Stack>
  </Grid>
);

export const RightColumn: React.FC<ColumnProps> = ({ children, stackProps, ...props }) => (
  <Grid size={{ xs: 12, md: 4 }} {...props}>
    <Stack {...stackProps} spacing={2}>
      {children}
    </Stack>
  </Grid>
);

export const TwoColumn: React.FC<Grid2Props> = ({ children, ...props }) => (
  <Grid container spacing={2} {...props} sx={{ width: "100%", ...props.sx }}>
    {children}
  </Grid>
);

export const ContentWrapperWithActionBar: React.FC<StackProps> = ({ children, sx, ...props }) => (
  <Stack sx={{ minHeight: { xs: "auto", sm: "100vh" }, ...sx }} {...props}>
    {children}
  </Stack>
);

export default Content;