import { Typography } from "@mui/material";
import { CurrConsumptionWidget } from "./HomeRoute/CurrConsumptionWidget";
import Grid from "@mui/material/Grid2";
import { CachedConsumptionWidget } from "./HomeRoute/CachedConsumptionWidget";
import { RelayConsumptionWidget } from "./HomeRoute/RelayConsumptionWidget";
import { RelaysListRoute } from "./RelaysListRoute";
import { DevicesRoute } from "./DevicesRoute";

export function HomeRoute(): React.ReactElement {
  return (
    <div style={{ flex: 1, padding: "10px" }}>
      <Typography component="h2" variant="h6" sx={{ mb: 2 }}>
        Overview
      </Typography>
      <Grid
        container
        spacing={2}
        columns={12}
        sx={{ mb: (theme) => theme.spacing(2) }}
      >
        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
          <CurrConsumptionWidget />
        </Grid>
        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
          <RelayConsumptionWidget />
        </Grid>
        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
          <CachedConsumptionWidget />
        </Grid>

        <Grid size={{ xs: 12, sm: 12, lg: 9 }}>
          <DevicesRoute homeWidget />
        </Grid>

        <Grid size={{ xs: 12, sm: 12, lg: 9 }}>
          <RelaysListRoute homeWidget />
        </Grid>
      </Grid>
    </div>
  );
}