import Head from 'next/head';
import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';

import Anvils from '../components/Anvils';
import Hosts from '../components/Hosts';
import CPU from '../components/CPU';
import SharedStorage from '../components/SharedStorage';
import Memory from '../components/Memory';
import Network from '../components/Network';
import PeriodicFetch from '../lib/fetchers/periodicFetch';
import Servers from '../components/Servers';
import Header from '../components/Header';
import AnvilProvider from '../components/AnvilContext';
import { LARGE_MOBILE_BREAKPOINT } from '../lib/consts/DEFAULT_THEME';
import useWindowDimensions from '../hooks/useWindowDimenions';

const PREFIX = 'Dashboard';

const classes = {
  child: `${PREFIX}-child`,
  server: `${PREFIX}-server`,
  container: `${PREFIX}-container`,
};

const StyledDiv = styled('div')(({ theme }) => ({
  [`& .${classes.child}`]: {
    width: '22%',
    height: '100%',
    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
      width: '50%',
    },
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },

  [`& .${classes.server}`]: {
    width: '35%',
    height: '100%',
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },

  [`& .${classes.container}`]: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    [theme.breakpoints.down('md')]: {
      display: 'block',
    },
  },
}));

const Dashboard = (): JSX.Element => {
  const width = useWindowDimensions();

  const { data } = PeriodicFetch<AnvilList>(
    `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
  );

  return (
    <StyledDiv>
      <Head>
        <title>Dashboard</title>
      </Head>
      <AnvilProvider>
        <Header />
        {data?.anvils &&
          width &&
          (width > LARGE_MOBILE_BREAKPOINT ? (
            <Box className={classes.container}>
              <Box className={classes.child}>
                <Anvils list={data} />
                <Hosts anvil={data.anvils} />
              </Box>
              <Box className={classes.server}>
                <Servers anvil={data.anvils} />
              </Box>
              <Box className={classes.child}>
                <SharedStorage />
              </Box>
              <Box className={classes.child}>
                <Network />
                <CPU />
                <Memory />
              </Box>
            </Box>
          ) : (
            <Box className={classes.container}>
              <Box className={classes.child}>
                <Servers anvil={data.anvils} />
                <Anvils list={data} />
                <Hosts anvil={data.anvils} />
              </Box>
              <Box className={classes.child}>
                <Network />
                <SharedStorage />
                <CPU />
                <Memory />
              </Box>
            </Box>
          ))}
      </AnvilProvider>
    </StyledDiv>
  );
};

export default Dashboard;
