Untitled

import React, { useState, useEffect } from 'react';
import { createStyles, useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import MainCard from 'ui-component/cards/MainCard';
import { Box } from '@mui/material';
import ChartEDCProgress from './chart/chartEDCProgress';
import ChartThermalAllocation from './chart/chartThermalAllocation';
import ChartEDCAllocation from './chart/chartEDCAllocation';
import ChartDoughnutEdcAllocation from './chart/chartDoughnutEDCAllocation';
import ChartDoughnutEDCProgress from './chart/chartDoughnutEDCProgress';
import ChartDoughnutThermal from './chart/chartDoughnutThermal';
import SummaryEDC from './chart/summaryEDC';
import SummaryThermal from './chart/summaryThermal';

const styles = createStyles({
  box: {
    backgroundColor: '#FFFFFF',
    borderRadius: '12px',
    height: '100%',
    padding: '8px'
  },
  boxBottom: {
    backgroundColor: '#FFFFFF',
    borderRadius: '12px',
    height: '80%',
    padding: '8px'
  }
});

const Dashboard = () => {
  const [activeChartIndex, setActiveChartIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setActiveChartIndex((prevIndex) => (prevIndex + 1) % 3);
    }, 12000);

    return () => clearInterval(interval);
  }, []);

  const charts = [
    { chart: <ChartDoughnutEdcAllocation />, key: 'chart1' },
    { chart: <ChartDoughnutEDCProgress />, key: 'chart2' },
    { chart: <ChartDoughnutThermal />, key: 'chart3' }
  ];
  const theme = useTheme();
  const isXtraScreen = useMediaQuery(theme.breakpoints.up('xl'));
  const isLargeScreen = useMediaQuery('(min-width:1300px)');
  return (
    <MainCard>
      <Box sx={{ overflow: isLargeScreen ? 'hidden' : 'auto' }}>
        <Box sx={{ display: 'flex', flexWrap: 'wrap', marginTop:'0', marginLeft: 'calc(1rem / -2)', marginRight: 'calc(1rem / -2)' }}>
          <Box sx={{ flex: '0 0 66.66667%', maxWidth: '66.66667%', paddingLeft: 'calc(1rem *.5)', paddingRight: 'calc(1rem *.5)' }}>
            <Box sx={{ boxShadow: '1px 3px 25px 0px #E1E1E1' }}>
              <SummaryEDC />
            </Box>
          </Box>
          <Box sx={{ flex: '0 0 33.333333%', maxWidth: '33.333333%', paddingLeft: 'calc(1rem *.5)', paddingRight: 'calc(1rem *.5)' }}>
            <Box sx={{ boxShadow: '1px 3px 25px 0px #E1E1E1' }}>
              <SummaryThermal />
            </Box>
          </Box>
        </Box>
        <Box sx={{ display: 'flex', flexWrap: 'wrap', marginTop:'.75rem', marginLeft: 'calc(1rem / -2)', marginRight: 'calc(1rem / -2)' }}>
          <Box sx={{ flex: '0 0 66.66667%', maxWidth: '66.66667%', paddingLeft: 'calc(1rem *.5)', paddingRight: 'calc(1rem *.5)' }}>
            <Box sx={{ ...styles.box, boxShadow: '1px 3px 25px 0px #E1E1E1', padding: '.75rem', height: isXtraScreen ? '300px' : '250px' }}>
              <ChartEDCProgress />
            </Box>
          </Box>
          <Box sx={{ flex: '0 0 33.333333%', maxWidth: '33.333333%', paddingLeft: 'calc(1rem *.5)', paddingRight: 'calc(1rem *.5)' }}>
            <Box sx={{ ...styles.box, boxShadow: '1px 3px 25px 0px #E1E1E1', padding: '.75rem', height: isXtraScreen ? '300px' : '250px' }}>
              <ChartThermalAllocation />
            </Box>
          </Box>
        </Box>
        <Box sx={{ display: 'flex', flexWrap: 'wrap', marginTop:'.75rem', marginLeft: 'calc(1rem / -2)', marginRight: 'calc(1rem / -2)', height: '50vh' }}>
          <Box sx={{ flex: '0 0 66.66667%', maxWidth: '66.66667%', paddingLeft: 'calc(1rem *.5)', paddingRight: 'calc(1rem *.5)' }}>
            <Box sx={{ ...styles.boxBottom, boxShadow: '1px 3px 25px 0px #E1E1E1', padding: '.75rem', height: isXtraScreen ? '300px' : '250px' }}>
              <ChartEDCAllocation />
            </Box>
          </Box>
          <Box sx={{ flex: '0 0 33.333333%', maxWidth: '33.333333%', paddingLeft: 'calc(1rem *.5)', paddingRight: 'calc(1rem *.5)' }}>
            <Box sx={{ ...styles.boxBottom, boxShadow: '1px 3px 25px 0px #E1E1E1', padding: '.75rem', height: isXtraScreen ? '300px' : '250px' }}>{charts[activeChartIndex].chart}</Box>
          </Box>
        </Box>
      </Box>
    </MainCard>
  );
};

export default Dashboard;