text: import React from 'react';
  import clsx from 'clsx';
  import { makeStyles } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import Drawer from '@material-ui/core/Drawer';
  import Box from '@material-ui/core/Box';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import List from '@material-ui/core/List';
  import Typography from '@material-ui/core/Typography';
  import Divider from '@material-ui/core/Divider';
  import IconButton from '@material-ui/core/IconButton';
  import Badge from '@material-ui/core/Badge';
  import Container from '@material-ui/core/Container';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  import Link from '@material-ui/core/Link';
  import MenuIcon from '@material-ui/icons/Menu';
  import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
  import NotificationsIcon from '@material-ui/icons/Notifications';
  import { mainListItems, secondaryListItems } from './listItems';
  import Chart from './Chart';
  import Genchart from './Genchart';
  import Orders from './Orders';
  import { Alert } from '@material-ui/lab';
  import Title from './Title';
  import AgePiechart from './AgePiechart';
  import GenPiechart from './GenPiechart';
  import RespPiechart from './RespPiechart';
  import Response from './Response';
  import InputLabel from '@material-ui/core/InputLabel';
  import FormHelperText from '@material-ui/core/FormHelperText';
  import FormControl from '@material-ui/core/FormControl';
  import Select from '@material-ui/core/Select';
  import NativeSelect from '@material-ui/core/NativeSelect';
  import Chip from "@material-ui/core/Chip";
  import MenuItem from "@material-ui/core/MenuItem";
  import Input from "@material-ui/core/Input";
  
  // const useStyles = makeStyles((theme: Theme) =>
  //   createStyles({
  //     formControl: {
  //       margin: theme.spacing(1),
  //       minWidth: 120,
  //     },
  //     selectEmpty: {
  //       marginTop: theme.spacing(2),
  //     },
  //   }),
  // );
  
  
  function Copyright() {
    return (
      <Typography variant="body2" color="textSecondary" align="center">
        {'Copyright © '}
        <Link color="inherit" href="https://material-ui.com/">
          Your Website
        </Link>{' '}
        {new Date().getFullYear()}
        {'.'}
      </Typography>
    );
  }
  
  // function NativeSelects() {
  //   const classes = useStyles();
  //   const [state, setState] = React.useState<{ age: string | number; name: string }>({
  //     age: '',
  //     name: 'hai',
  //   });
  
  //   const handleChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
  //     const name = event.target.name as keyof typeof state;
  //     setState({
  //       ...state,
  //       [name]: event.target.value,
  //     });
  //   };
  
  //   return (
  //     <div>
  //       <FormControl className={classes.formControl}>
  //         <InputLabel htmlFor="age-native-helper">Age</InputLabel>
  //         <NativeSelect
  //           value={state.age}
  //           onChange={handleChange}
  //           inputProps={{
  //             name: 'age',
  //             id: 'age-native-helper',
  //           }}
  //         >
  //           <option aria-label="None" value="" />
  //           <option value={10}>Ten</option>
  //           <option value={20}>Twenty</option>
  //           <option value={30}>Thirty</option>
  //         </NativeSelect>
  //         <FormHelperText>Some important helper text</FormHelperText>
  //       </FormControl>
  
  //     </div>
  //   );
  // }
  const drawerWidth = 240;
  
  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
    },
    toolbar: {
      paddingRight: 24, // keep right padding when drawer closed
    },
    toolbarIcon: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      padding: '0 8px',
      ...theme.mixins.toolbar,
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
      transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`,
      transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    menuButton: {
      marginRight: 36,
    },
    menuButtonHidden: {
      display: 'none',
    },
    title: {
      flexGrow: 1,
    },
    drawerPaper: {
      position: 'relative',
      whiteSpace: 'nowrap',
      width: drawerWidth,
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    drawerPaperClose: {
      overflowX: 'hidden',
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      width: theme.spacing(7),
      [theme.breakpoints.up('sm')]: {
        width: theme.spacing(9),
      },
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      height: '100vh',
      overflow: 'auto',
    },
    container: {
      paddingTop: theme.spacing(4),
      paddingBottom: theme.spacing(4),
    },
    paper: {
      padding: theme.spacing(2),
      display: 'flex',
      overflow: 'auto',
      flexDirection: 'column',
    },
    fixedHeight: {
      height: 500,
    },
  }));
  
  function Emergency() {
    const classes = useStyles();
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
    return (
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={3}>
            {/* Chart */}
            <Grid item xs={12} md={7} lg={7}>
              <Paper className={fixedHeightPaper}>
                <Chart />
              </Paper>
            </Grid>
            {/* Recent Deposits */}
            <Grid item xs={12} md={5} lg={5}>
              <Paper className={fixedHeightPaper}>
              <Title>Emergency cases (Age wise) </Title>
                <Typography component="p" variant="h5">
                  Total cases today: 79
                </Typography>
                <AgePiechart/>
              </Paper>
            </Grid>
          </Grid>
          <Box pt={4}>
            <Copyright />
          </Box>
        </Container>
      </main>
    )
  }
  
  function General() {
    const classes = useStyles();
  
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
    return (
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={2}>
            {/* Chart */}
            <Grid item xs={12} md={7} lg={7}>
              <Paper className={fixedHeightPaper}>
                <Genchart/>
              </Paper>
            </Grid>
            {/* Recent Deposits */}
            <Grid item xs={12} md={5} lg={5}>
              <Paper className={fixedHeightPaper}>
              <Title>General cases (Age wise) </Title>
                <Typography component="p" variant="h5">
                  Total cases today: 4545
                </Typography>
                <GenPiechart/>
              </Paper>
            </Grid>
          </Grid>
          <Box pt={4}>
            <Copyright />
          </Box>
        </Container>
      </main>
    )
  }
  
  function Main() {
    const classes = useStyles();
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
    return (
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={2}>
            {/* Chart */}
            <Grid item xs={12} md={7} lg={7}>
              <Paper className={fixedHeightPaper}>
                <Genchart/>
              </Paper>
            </Grid>
            {/* Recent Deposits */}
            <Grid item xs={12} md={5} lg={5}>
              <Paper className={fixedHeightPaper}>
              <Title>General cases (Age wise) </Title>
                <Typography component="p" variant="h5">
                  Total cases today: 4545
                </Typography>
                <GenPiechart/>
              </Paper>
            </Grid>
          </Grid>
          <Box pt={4}>
            <Copyright />
          </Box>
        </Container>
      </main>
    )
  }
  
  function Resp() {
    const classes = useStyles();
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
    return (
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={2}>
            {/* Chart */}
            <Grid item xs={12} md={7} lg={7}>
              <Paper className={fixedHeightPaper}>
                <Response/>
              </Paper>
            </Grid>
            {/* Recent Deposits */}
            <Grid item xs={12} md={5} lg={5}>
              <Paper className={fixedHeightPaper}>
              <Title>General cases (Age wise) </Title>
                <Typography component="p" variant="h5">
                Unaddressed cases today: 267
                </Typography>
                <RespPiechart/>
              </Paper>
            </Grid>
          </Grid>
          <Box pt={4}>
            <Copyright />
          </Box>
        </Container>
      </main>
    )
  }
  
  
  export default function Dashboard() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(true);
    const [count, setCounter] = React.useState(0);
  
    const handleDrawerOpen = () => {
      setOpen(true);
    };
    const handleDrawerClose = () => {
      setOpen(false);
    };
    const handleClick = () => {
      console.log(count);
      setCounter((count+1)%5);
  
    };
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
    let comp;
    if(count==0){
      comp = <Emergency/>;
    }
    else if(count==1){
      comp = <Emergency/>;
    } 
    else if(count==2){
      comp = <General/>;
    } 
    else if(count==3){
      comp = <Resp/>;
    } 
    else{
      comp = <Emergency/>;
    } 
  
  
    return (
      <div className={classes.root}>
        <CssBaseline />
        <AppBar position="absolute" className={clsx(classes.appBar, open && classes.appBarShift)}>
          <Toolbar className={classes.toolbar}>
            <IconButton
              edge="start"
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              className={clsx(classes.menuButton, open && classes.menuButtonHidden)}
            >
              <MenuIcon />
            </IconButton>
            <Typography component="h1" variant="h6" color="inherit" noWrap className={classes.title}>
              Dashboard
            </Typography>
            <IconButton color="inherit">
              <Badge badgeContent={4} color="secondary">
                <NotificationsIcon />
              </Badge>
            </IconButton>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          classes={{
            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
          }}
          open={open}
        >
          <div className={classes.toolbarIcon}>
            <IconButton onClick={handleDrawerClose}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List onClick={handleClick}>{mainListItems}</List>
        </Drawer>
        {comp}
      </div>
    );
  }
  