import { Outlet } from 'react-router';

import { Box } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { AsideSidebar } from './AsideSidebar';
import { DeployHeader } from './DeployHeader';

const SIDEBAR_WIDTH = 250;

const useStyles = makeStyles()(theme => ({
  projectHome: {
    display: 'grid',
    gridTemplateAreas: '"aside main"',
    // minmax(0, 1fr) lets the main column shrink below its content width so wide
    // children (readmes, tables) scroll instead of stretching the grid.
    gridTemplateColumns: `${SIDEBAR_WIDTH}px minmax(0, 1fr)`
  },
  aside: {
    gridArea: 'aside',
    padding: '20px 0',
    borderRight: `1px solid ${theme.palette.divider}`
  },
  // No left padding: the DeployHeader delimiter runs edge-to-edge to the sidebar.
  // The page content is inset via `content`; the header insets its own search box.
  main: {
    gridArea: 'main',
    paddingRight: 30,
    paddingBottom: 80,
    minHeight: 'calc(100vh - 80px)'
  },
  content: { paddingLeft: 30 }
}));

export const Layout = () => {
  const { classes } = useStyles();
  return (
    <Box className={classes.projectHome}>
      <Box component="aside" className={classes.aside}>
        <AsideSidebar />
      </Box>
      <Box component="main" className={classes.main}>
        <DeployHeader />
        <Box className={classes.content}>
          <Outlet />
        </Box>
      </Box>
    </Box>
  );
};
