@mui/material#Typography JavaScript Examples

Breadcrumb = ({links}) => {
    return (
        <Breadcrumbs>
            {links !== null && links.map((link, key) => {
                    if(link.to !== null){
                        return (
                            <Link key={key} to={link.to} component={RouterLink}>{link.text}</Link>  
                        )
                    }else{
                        return (
                            <Typography key={key} color="textPrimary">{link.text}</Typography>
                        )
                    }
                    
                })
            }
        </Breadcrumbs>
    )
}

function SideDrawer(props) {
  const { classes, onClose, open } = props;
  return (
    <Drawer anchor="right" open={open} variant="temporary" onClose={onClose}>
      <Toolbar disableGutters className={classes.toolbar}>
        <Box
          pl={3}
          pr={3}
          display="flex"
          justifyContent="space-between"
          width="100%"
          alignItems="center"
        >
          <Typography variant="h6">A Sidedrawer</Typography>
          <IconButton
            onClick={onClose}
            color="primary"
            aria-label="Close Sidedrawer"
            size="large">
            <CloseIcon />
          </IconButton>
        </Box>
      </Toolbar>
      <Divider />
    </Drawer>
  );
}

export default function SearchNotFound({ searchQuery = '', ...other }) {
  return (
    <Paper {...other}>
      <Typography gutterBottom align="center" variant="subtitle1">
        Not found
      </Typography>
      <Typography variant="body2" align="center">
        No results found for &nbsp;
        <strong>&quot;{searchQuery}&quot;</strong>. Try checking for typos or using complete words.
      </Typography>
    </Paper>
  );
}

function LoadChart(props) {
  const { classes, t, load } = props;

  return (
    <Paper className={classes.paper}>
      <div className={classes.root}>
        <Typography className={classes.chartTitle}>{t("Load")}</Typography>
        <ResponsiveContainer width="100%" height={200} >
          <BarChart data={load} margin={{ top: 0, right: 32, left: 10, bottom: 16 }}>
            <defs>
              <linearGradient id="gradientBlue2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#2980B9"} />
                <stop offset="95%" stopColor={"#6DD5FA"} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="time" />
            <YAxis />
            <Legend />
            <Tooltip labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}/>
            <Bar
              dataKey="value"
              fill="url(#gradientBlue)"/>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Paper>
  );
}

MatxProgressBar = ({
  value = 75,
  color = 'primary',
  text = '',
  spacing = 2,
  coloredText = false,
}) => {
  const theme = useTheme();
  const secondary = theme.palette.text.secondary;

  return (
    <Grid container spacing={spacing} alignItems="center">
      <Grid item xs={text ? 8 : 12}>
        <CustomLinearProgress
          color={color}
          value={value}
          variant="determinate"
        ></CustomLinearProgress>
      </Grid>
      {text !== '' && (
        <Grid item xs={text ? 4 : false}>
          <Typography color={color}>
            <Small sx={{ color: coloredText ? '' : secondary }}>{text}</Small>
          </Typography>
        </Grid>
      )}
    </Grid>
  );
}

export default function AddToOutfitCard({ updateWardrobe }) {
  //useContext
  const { overviewProduct, selectedStyleState, clickTracker } =
    useContext(ProductsContext);
  const [overviewProductState, setOverviewProductState] = overviewProduct;
  const [selectedStyle, setSelectedStyle] = selectedStyleState;
  const [clickTrackerFunc] = clickTracker;

  const addToOutfitList = (selectedStyleObj) => {
    let copyOfSelectedStyleObj = selectedStyleObj;
    selectedStyleObj.selectedStyleObj = copyOfSelectedStyleObj;
    selectedStyleObj.slogan = overviewProduct.slogan;
    selectedStyleObj.overviewProduct = overviewProductState;
    selectedStyleObj.description = overviewProductState.description;
    selectedStyleObj.category = overviewProductState.category;
    selectedStyleObj.features = overviewProductState.features;

    updateWardrobe(selectedStyleObj);
  };

  return (
    <Card
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc(
          "Add to Outfit List Card",
          event.target
        )
      }
      className={"maxWidth: 300"}
    >
      <CardContent>
        <Typography gutterBottom variant="h5" component="h2">
          Like the above outift?
        </Typography>
        <CardActionArea>
          <DoneOutlineIcon
            style={{ fontSize: 250 }}
            onClick={() => {
              addToOutfitList(selectedStyle);
            }}
          />
        </CardActionArea>
        <Typography variant="body2" color="textSecondary" component="p">
          Click the Icon add to your wardrobe
        </Typography>
      </CardContent>
    </Card>
  );
}

VideoPage = props => {
  const classes = useStyles(props)
  const { instanceTableData } = props.perspectiveState
  const { portalConfig, perspectiveConfig, localID, resultClass, screenSize, layoutConfig } = props
  let { properties } = props

  const readyToRenderVideoPlayer = () => {
    return `http://ldf.fi/warmemoirsampo/${localID}` === instanceTableData.id &&
        has(instanceTableData, 'youTubeID')
  }

  if (!has(instanceTableData, 'warsaPage')) {
    properties = properties.filter(prop => prop.id !== 'warsaPage')
  }

  return (
    <div className={classes.root}>
      <Grid className={classes.mainContainer} container spacing={1}>
        <Grid className={classes.gridItem} item xs={12} sm={12} md={7}>
          <Paper className={classes.videoPlayerContainer}>
            {readyToRenderVideoPlayer() &&
              <Player
                resultClass={props.resultClass}
                data={instanceTableData}
                location={useLocation()}
                videoPlayerState={props.videoPlayerState}
                updateVideoPlayerTime={props.updateVideoPlayerTime}
              />}
          </Paper>
          <Paper className={classes.tableContainer}>
            <InstancePageTable
              portalConfig={portalConfig}
              perspectiveConfig={perspectiveConfig}
              resultClass={resultClass}
              data={instanceTableData}
              properties={properties}
              screenSize={screenSize}
              layoutConfig={layoutConfig}
            />
          </Paper>
        </Grid>
        <Grid className={classes.gridItem} item xs={12} sm={12} md={5}>
          <Paper className={classes.tableOfContents}>
            <Typography variant='h6' component='h2'>Sisällysluettelo</Typography>
            {has(instanceTableData, 'timeSlice') &&
              <VideoTableOfContents
                instanceTableData={instanceTableData}
                toc={instanceTableData.timeSlice}
                textFormat='plain-text-from-text-slice'
                // textFormat='annotated-html-from-text-slice'
                // textFormat='annotated-html-from-time-slice'
                videoPlayerState={props.videoPlayerState}
              />}
          </Paper>
        </Grid>
      </Grid>
    </div>
  )
}

AccountMenu = () => {

    const { accountId } = useParams();

    const { userData } = useContext(AuthContext);

    useEffect(() => {
        document.querySelectorAll('.c-sidebar').forEach(element => {
            window.coreui.Sidebar._sidebarInterface(element)
        });
    })

    return (
        <List>
            <Link to={'/account/'+accountId+'/'} style={{textDecoration:'none'}}>
                <ListItem button key="Demo App">
                    <ListItemIcon><DashboardIcon /></ListItemIcon>
                    <ListItemText primary={<Typography color="textPrimary">Demo App</Typography>} />
                </ListItem>
            </Link>
            {userData.currentAccount.role === 'admin' && 
            <>
                <Divider />
                <Link to={'/account/'+accountId+'/users'} style={{textDecoration:'none'}}>
                    <ListItem button key="Users">
                        <ListItemIcon><PeopleIcon /></ListItemIcon>
                        <ListItemText primary={<Typography color="textPrimary">Users</Typography>} />
                    </ListItem>
                </Link>
                <Link to={'/account/'+accountId+'/billing'} style={{textDecoration:'none'}}>
                    <ListItem button key="Billing">
                        <ListItemIcon><PaymentIcon /></ListItemIcon>
                        <ListItemText primary={<Typography color="textPrimary">Billing</Typography>} />
                    </ListItem>
                </Link>
            </>
            }
        </List>
    )
}

function Dashboard(props) {
  const {
    selectDashboard,
    CardChart,
    statistics,
    toggleAccountActivation,
    pushMessageToSnackbar,
    targets,
    setTargets,
    isAccountActivated,
  } = props;

  useEffect(selectDashboard, [selectDashboard]);

  return (
    <Fragment>
      <StatisticsArea CardChart={CardChart} data={statistics} />
      <Box mt={4}>
        <Typography variant="subtitle1" gutterBottom>
          Your Account
        </Typography>
      </Box>
      <AccountInformationArea
        isAccountActivated={isAccountActivated}
        toggleAccountActivation={toggleAccountActivation}
      />
      <Box mt={4}>
        <Typography variant="subtitle1" gutterBottom>
          Settings
        </Typography>
      </Box>
      <SettingsArea pushMessageToSnackbar={pushMessageToSnackbar} />
      <UserDataArea
        pushMessageToSnackbar={pushMessageToSnackbar}
        targets={targets}
        setTargets={setTargets}
      />
    </Fragment>
  );
}

// ----------------------------------------------------------------------

export default function DashboardApp() {
  return (
    <Page title="Dashboard">
      <Container maxWidth="xl">
        <Typography variant="h4" sx={{ mb: 5 }}>
          Hi, Welcome ?
        </Typography>

        <Grid container spacing={3}>
          <Grid item xs={12} md={6} lg={8}>
            <Card>
              <Box sx={{ p: 3, pb: 1 }} dir="ltr">
                <Typography variant="p" sx={{ mb: 5 }}>
                  Kick start your project ?
                </Typography>
                All the best for your new project
                <Typography>
                  Please make sure to{' '}
                  <Link
                    href="https://github.com/faisalnazik/Django-REST-Framework-React-BoilerPlate/blob/master/README.md"
                    target="_blank"
                  >
                    README
                  </Link>
                  to understand where to go from here to use this BoilerPlate
                </Typography>
                <Box m={2} pt={3}>
                  <Button
                    href="https://github.com/faisalnazik/Django-REST-Framework-React-BoilerPlate"
                    target="_blank"
                    variant="outlined"
                  >
                    Get more information
                  </Button>
                </Box>
              </Box>
            </Card>
          </Grid>

          <Grid item xs={12} md={6} lg={4}>
            <Card>
              {' '}
              <CardContent>
                <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
                  @faisalnazik
                </Typography>
                <Typography variant="h5" component="div">
                  Give a ⭐️ if this project helped you!
                </Typography>

                <Typography variant="body2">
                  If you have find any type of Bug, Raise an Issue So we can fix it
                </Typography>
              </CardContent>
              <CardActions>
                <Box m={2} pt={2}>
                  <Button
                    href="https://github.com/faisalnazik/Django-REST-Framework-React-BoilerPlate"
                    target="_blank"
                    variant="outlined"
                  >
                    Github
                  </Button>
                </Box>
              </CardActions>
            </Card>
          </Grid>
        </Grid>
      </Container>
    </Page>
  );
}

render() {
    const { classes, about } = this.props;
    const { API, backend, schema } = about;


    return (
      <div className={classes.root}>
        <div className={classes.flexItem}>
          <Paper className={classes.paper}>
            <Dashboard className={classes.icon}/>
            <div className={classes.labeledData}>
              <Typography className={classes.data}>{process.env.REACT_APP_BUILD_VERSION}</Typography>
              <Typography className={classes.label}>Web UI</Typography>
            </div>
          </Paper>
        </div>
        <div className={classes.flexItem}>
          <Paper className={classes.paper}>
            <Power className={classes.icon}/>
            <div className={classes.labeledData}>
              <Typography className={classes.data}>{API}</Typography>
              <Typography className={classes.label}>API</Typography>
            </div>
          </Paper>
        </div>
        <div className={classes.flexItem}>
          <Paper className={classes.paper}>
            <Outlet className={classes.icon}/>
            <div className={classes.labeledData}>
              <Typography className={classes.data}>{backend}</Typography>
              <Typography className={classes.label}>Backend</Typography>
            </div>
          </Paper>
        </div>
        <div className={classes.flexItem}>
          <Paper className={classes.paper}>
            <StorageIcon className={classes.icon}/>
            <div className={classes.labeledData}>
              <Typography className={classes.data}>{this.formatBytes(schema)}</Typography>
              <Typography className={classes.label}>Database</Typography>
            </div>
          </Paper>
        </div>
      </div>
    );
  }

export default function DiscreteSlider() {
  return (
    <SliderRoot>
      <Typography id="discrete-slider" gutterBottom>
        Temperature
      </Typography>

      <Slider
        marks
        step={10}
        defaultValue={20}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider"
      />

      <Box className="margin" />

      <Typography id="discrete-slider-custom" gutterBottom>
        Custom marks
      </Typography>

      <Slider
        step={10}
        marks={marks}
        defaultValue={20}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider-custom"
      />

      <div className="margin" />

      <Typography id="discrete-slider-restrict" gutterBottom>
        Restricted values
      </Typography>

      <Slider
        step={null}
        marks={marks}
        defaultValue={20}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        valueLabelFormat={valueLabelFormat}
        aria-labelledby="discrete-slider-restrict"
      />

      <div className="margin" />

      <Typography id="discrete-slider-always" gutterBottom>
        Always visible
      </Typography>

      <Slider
        step={10}
        marks={marks}
        defaultValue={80}
        valueLabelDisplay="on"
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider-always"
      />
    </SliderRoot>
  );
}

export default function ModalPopup({
  onClose,
  open,
  compareFeatures,
  relatedProductFeatures,
  overviewProductFeatures,
  relatedProductName,
}) {
  //useContext
  const { clickTracker, overviewProduct } = useContext(ProductsContext);
  const [clickTrackerFunc] = clickTracker;

  const [overviewProductState, setOverviewProductState] = overviewProduct;

  const handleClose = () => {
    onClose();
  };

  let uniqueFeatures = [...new Set(compareFeatures)];

  return (
    <Dialog
      onClose={handleClose}
      aria-labelledby="simple-dialog-title"
      open={open}
      onClick={() =>
        clickTrackerFunc.clickTrackerFunc("Comparison Modal", event.target)
      }
    >
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <CompareArrowsIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Compare Items
          </Typography>
        </Toolbar>
      </AppBar>
      <Grid
        container
        direction="column"
        justifyContent="space-evenly"
        alignItems="stretch"
      >
        <Grid item xs={12}>
          <Grid
            container
            direction="row"
            justifyContent="space-between"
            alignItems="center"
          >
            <Grid item xs={4}>
              <DialogTitle>Overview Product</DialogTitle>
            </Grid>
            <Grid item xs={4}></Grid>
            <Grid item xs={4}>
              <DialogTitle>Selected Product</DialogTitle>
            </Grid>
          </Grid>
        </Grid>
        {uniqueFeatures.map((feature, index) => (
          <Grid item xs={12} key={index}>
            <Grid spacing={2} container direction="row" alignItems="center">
              <Grid item xs={4}>
                {overviewProductFeatures[feature] ? (
                  <Typography variant="h6" color="inherit" component="p">
                    {overviewProductFeatures[feature]}
                  </Typography>
                ) : (
                  ""
                )}
              </Grid>
              <Grid item xs={4}>
                <Typography variant="h6" color="inherit" component="p">
                  {feature}
                </Typography>
              </Grid>
              <Grid item xs={4}>
                {relatedProductFeatures[feature] ? (
                  <Typography variant="h6" color="inherit" component="p">
                    {relatedProductFeatures[feature]}
                  </Typography>
                ) : (
                  ""
                )}
              </Grid>
            </Grid>
          </Grid>
        ))}
      </Grid>
    </Dialog>
  );
}

ResourceModal = ({ isOpen, onClose, resource }) => {
    const { classes } = useStyles();
    const { t } = useTranslation();
    const history = useHistory();
    const { getUserConfig } = useEdlibComponentsContext();
    const { getPath } = useIframeStandaloneContext();
    const canReturnResources = getUserConfig('canReturnResources');
    const { www } = useConfigurationContext();

    const [actionStatus, setActionStatus] = React.useState({
        loading: false,
        error: false,
    });
    const { onInsert } = useResourceCapabilities();

    const insertResource = React.useCallback(async () => {
        setActionStatus({
            loading: true,
            error: false,
        });

        await onInsert(
            resource.id,
            resource.version.id,
            resource.version.title
        );
    }, [onInsert, setActionStatus, resource]);

    const editResource = React.useCallback(() => {
        history.push(getPath(`/resources/${resource.id}`));
        onClose();
    }, [resource]);

    const capabilities = useResourceCapabilitiesFlags(resource);

    return (
        <Dialog
            maxWidth="lg"
            fullWidth
            onClose={onClose}
            open={isOpen}
            classes={{
                paperScrollPaper: classes.dialog,
            }}
        >
            <DialogTitle disableTypography className={classes.dialogTitle}>
                <Box display="flex">
                    <Box
                        display="flex"
                        flexDirection="column"
                        justifyContent="center"
                    >
                        <ResourceIcon
                            contentTypeInfo={resource.contentTypeInfo}
                            fontSizeRem={2}
                        />
                    </Box>
                    <Box>
                        <Box
                            display="flex"
                            flexDirection="column"
                            justifyContent="center"
                            marginLeft={1}
                        >
                            <Typography variant="h6">
                                {resource.version.title}
                            </Typography>
                        </Box>
                        <Box display="flex" marginLeft={1}>
                            <Typography>
                                <a
                                    href={www(`/s/resources/${resource.id}`)}
                                    target="_blank"
                                >
                                    {www(`/s/resources/${resource.id}`)}
                                </a>
                            </Typography>
                        </Box>
                    </Box>
                </Box>
                {onClose ? (
                    <Box
                        display="flex"
                        flexDirection="column"
                        justifyContent="center"
                    >
                        <IconButton
                            aria-label="close"
                            className={classes.closeButton}
                            onClick={onClose}
                            size="large"
                        >
                            <CloseIcon />
                        </IconButton>
                    </Box>
                ) : null}
            </DialogTitle>
            <DialogContent dividers>
                <Grid container spacing={1}>
                    <Grid item lg={7} xs={12}>
                        <ResourcePreview resource={resource}>
                            {({ loading, error, frame }) => {
                                if (loading) {
                                    return (
                                        <div
                                            style={{
                                                display: 'flex',
                                                justifyContent: 'center',
                                                padding: '20px 0',
                                            }}
                                        >
                                            <Spinner />
                                        </div>
                                    );
                                }

                                if (error) {
                                    return <div>Noe skjedde</div>;
                                }

                                return (
                                    <>
                                        <div>{frame}</div>
                                        <div className={classes.footer}>
                                            <div className={classes.meta}>
                                                <div>
                                                    {_.capitalize(
                                                        t('publishing_date')
                                                    )}
                                                </div>
                                                <div>
                                                    {moment(
                                                        resource.version
                                                            .createdAt
                                                    ).format('D. MMMM YYYY')}
                                                </div>
                                            </div>
                                            <div className={classes.meta}>
                                                <div>
                                                    {_.capitalize(t('license'))}
                                                </div>
                                                <div>
                                                    <License
                                                        license={
                                                            resource.version
                                                                .license
                                                        }
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </>
                                );
                            }}
                        </ResourcePreview>
                    </Grid>
                    <Grid item lg={5} xs={12}>
                        <ResourceStats resourceId={resource.id} />
                    </Grid>
                </Grid>
            </DialogContent>
            <DialogActions classes={{ root: classes.dialogActions }}>
                {capabilities[resourceCapabilities.EDIT] && (
                    <Button
                        color="primary"
                        variant="contained"
                        onClick={editResource}
                        startIcon={<EditIcon />}
                    >
                        {t('Rediger ressurs').toUpperCase()}
                    </Button>
                )}
                {canReturnResources && (
                    <Button
                        color="primary"
                        variant="contained"
                        onClick={insertResource}
                        startIcon={<ArrowForward />}
                    >
                        {t('Bruk ressurs').toUpperCase()}
                    </Button>
                )}
            </DialogActions>
        </Dialog>
    );
}

UserProfileView = () => {
    const history = useHistory();

    return (
        <AuthContext.Consumer>
            {(context) => (   
                <List component="nav">
                    <ListItem>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><strong>AVATAR</strong><br /><Typography color="textSecondary">Update via social login</Typography></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2} style={{marginLeft: "auto", marginRight: "0px",}}>
                                    <Avatar alt={context.authUser.user.displayName} src={context.authUser.user.photoURL} style={{height:'64px',width:'64px'}} />
                                </Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                    <Divider />
                    <ListItem button onClick={() => {
                        history.push('/user/profile/update-name');
                    }}>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><strong>NAME</strong></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}>{context.authUser.user.displayName}</Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2} style={{marginLeft: "auto", marginRight: "0px",}}>
                                    <EditIcon />
                                </Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                    <Divider />
                    <ListItem button onClick={() => {
                        history.push('/user/profile/update-email');
                    }}>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><strong>EMAIL</strong></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}>{context.authUser.user.email}</Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2} style={{marginLeft: "auto", marginRight: "0px",}}>
                                    <EditIcon />
                                </Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                    <Divider />
                    <ListItem button={!context.authUser.user.emailVerified} onClick={() => {
                        if(!context.authUser.user.emailVerified)history.push('/user/profile/verify-email');
                    }}>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><strong>EMAIL VERIFIED</strong></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}>{(context.authUser.user.emailVerified?" Verified":"Unverified email")}</Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2} style={{marginLeft: "auto", marginRight: "0px",}}>
                                    {context.authUser.user.emailVerified?(<VerifiedUserIcon />):(<SendIcon />)}
                                </Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                    <Divider />
                    <ListItem button onClick={() => {
                        history.push('/user/profile/update-phone');
                    }}>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><strong>PHONE</strong></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}>{context.authUser.user.phoneNumber}</Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2} style={{marginLeft: "auto", marginRight: "0px",}}>
                                    <EditIcon />
                                </Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                    <Divider />
                    <ListItem button onClick={() => {
                        history.push('/user/profile/update-password');
                    }}>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><strong>PASSWORD</strong></Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}>••••••••</Box>
                            </Grid>
                            <Grid container item xs={12} md={4}>
                                <Box p={2} style={{marginLeft: "auto", marginRight: "0px",}}>
                                    <EditIcon />
                                </Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                    <Divider />
                    <ListItem button onClick={() => {
                        history.push('/user/profile/delete');
                    }}>
                        <Grid container spacing={1}>
                            <Grid container item xs={12} md={4}>
                                <Box p={2}><Typography color="error"><strong>DELETE ACCOUNT</strong></Typography></Box>
                            </Grid>
                        </Grid>
                    </ListItem>
                </List>
            )}
        </AuthContext.Consumer>
    )
}

function Settings1(props) {
  const { classes, pushMessageToSnackbar } = props;
  const [isSaveLoading, setIsSaveLoading] = useState(false);
  const [isDefaultLoading, setIsDefaultLoading] = useState(false);
  const [option1, setOption1] = useState("None");
  const [option2, setOption2] = useState("None");
  const [option3, setOption3] = useState("None");
  const [option4, setOption4] = useState("None");
  const [option5, setOption5] = useState("2 Days");
  const [option6, setOption6] = useState(7500);

  const handleChange = useCallback(
    (event) => {
      const { name, value } = event.target;
      if (name === "option6") {
        if (value > 7500 || value < 1000) {
          return;
        }
      }
      switch (name) {
        case "option1": {
          setOption1(value);
          break;
        }
        case "option2": {
          setOption2(value);
          break;
        }
        case "option3": {
          setOption3(value);
          break;
        }
        case "option4": {
          setOption4(value);
          break;
        }
        case "option5": {
          setOption5(value);
          break;
        }
        case "option6": {
          setOption6(value);
          break;
        }
        default:
          throw new Error("No branch selected in switch statement.");
      }
    },
    [setOption1, setOption2, setOption3, setOption4, setOption5, setOption6]
  );

  const resetState = useCallback(() => {
    setIsSaveLoading(false);
    setIsDefaultLoading(false);
    setOption1("None");
    setOption2("None");
    setOption3("None");
    setOption4("None");
    setOption5("2 Days");
    setOption6(7500);
  }, [
    setIsSaveLoading,
    setIsDefaultLoading,
    setOption1,
    setOption2,
    setOption3,
    setOption4,
    setOption5,
    setOption6,
  ]);

  const onSetDefault = useCallback(() => {
    setIsDefaultLoading(true);
    setTimeout(() => {
      pushMessageToSnackbar({
        text: "Your settings have been reset to default",
      });
      resetState();
    }, 1500);
  }, [pushMessageToSnackbar, resetState]);

  const onSubmit = useCallback(() => {
    setIsSaveLoading(true);
    setTimeout(() => {
      pushMessageToSnackbar({
        text: "Your settings have been saved",
      });
      setIsSaveLoading(false);
    }, 1500);
  }, [setIsSaveLoading, pushMessageToSnackbar]);

  const inputs = [
    {
      state: option1,
      label: "Option 1",
      stateName: "option1",
    },
    {
      state: option2,
      label: "Option 2",
      stateName: "option2",
    },
    {
      state: option3,
      label: "Option 3",
      stateName: "option3",
    },
    {
      state: option4,
      label: "Option 4",
      stateName: "option4",
    },
  ];

  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>Settings 1</Typography>
      </AccordionSummary>
      <AccordionDetails className={classes.dBlock}>
        <List disablePadding>
          <Bordered disableVerticalPadding disableBorderRadius>
            {inputs.map((element, index) => (
              <ListItem
                className="listItemLeftPadding"
                disableGutters
                divider
                key={index}
              >
                <ListItemText>
                  <Typography variant="body2">{element.label}</Typography>
                </ListItemText>
                <FormControl variant="outlined">
                  <ListItemSecondaryAction
                    className={classes.ListItemSecondaryAction}
                  >
                    <Select
                      value={element.state}
                      onChange={handleChange}
                      input={
                        <OutlinedInput
                          name={element.stateName}
                          labelWidth={0}
                          className={classes.numberInput}
                          classes={{ input: classes.numberInputInput }}
                        />
                      }
                      MenuProps={{ disableScrollLock: true }}
                    >
                      {inputOptions.map((innerElement) => (
                        <MenuItem value={innerElement} key={innerElement}>
                          {innerElement}
                        </MenuItem>
                      ))}
                    </Select>
                  </ListItemSecondaryAction>
                </FormControl>
              </ListItem>
            ))}
            <ListItem className="listItemLeftPadding" disableGutters divider>
              <ListItemText>
                <Typography variant="body2">Option 5</Typography>
              </ListItemText>
              <FormControl variant="outlined">
                <ListItemSecondaryAction
                  className={classes.ListItemSecondaryAction}
                >
                  <Select
                    value={option5}
                    onChange={handleChange}
                    input={
                      <OutlinedInput
                        name="option5"
                        labelWidth={0}
                        className={classes.numberInput}
                        classes={{ input: classes.numberInputInput }}
                      />
                    }
                    MenuProps={{ disableScrollLock: true }}
                  >
                    {[
                      "Always",
                      "6 Hours",
                      "12 Hours",
                      "1 Day",
                      "2 Days",
                      "3 Days",
                      "1 Week",
                    ].map((element) => (
                      <MenuItem value={element} key={element}>
                        {element}
                      </MenuItem>
                    ))}
                  </Select>
                </ListItemSecondaryAction>
              </FormControl>
            </ListItem>
            <ListItem className="listItemLeftPadding" disableGutters>
              <ListItemText>
                <Typography variant="body2">Option 6</Typography>
              </ListItemText>
              <FormControl variant="outlined">
                <ListItemSecondaryAction
                  className={classes.ListItemSecondaryAction}
                >
                  <OutlinedInput
                    labelWidth={0}
                    name="option6"
                    value={option6}
                    type="number"
                    onChange={handleChange}
                    className={classes.numberInput}
                    classes={{ input: classes.numberInputInput }}
                    inputProps={{ step: 20 }}
                  />
                </ListItemSecondaryAction>
              </FormControl>
            </ListItem>
          </Bordered>
        </List>
      </AccordionDetails>
      <AccordionDetails className={classes.accordionDetails}>
        <Box mr={1}>
          <Button
            onClick={onSetDefault}
            disabled={isSaveLoading || isDefaultLoading}
          >
            Default {isDefaultLoading && <ButtonCircularProgress />}
          </Button>
        </Box>
        <Button
          variant="contained"
          color="secondary"
          disabled={isSaveLoading || isDefaultLoading}
          onClick={onSubmit}
        >
          Save {isSaveLoading && <ButtonCircularProgress />}
        </Button>
      </AccordionDetails>
    </Accordion>
  );
}

// ----------------------------------------------------------------------

export default function AccountPopover() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const anchorRef = useRef(null);

  const [open, setOpen] = useState(null);

  const handleOpen = (event) => {
    setOpen(event.currentTarget);
  };

  const handleClose = () => {
    setOpen(null);
  };

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  useEffect(() => {
    if (!userInfo) {
      navigate('/login', { replace: true });
      dispatch({ type: LOGOUT });
    }
  }, [navigate, userInfo]);

  const logoutHandler = () => {
    dispatch(logout());
  };
  return (
    <>
      <IconButton
        ref={anchorRef}
        onClick={handleOpen}
        sx={{
          p: 0,
          ...(open && {
            '&:before': {
              zIndex: 1,
              content: "''",
              width: '100%',
              height: '100%',
              borderRadius: '50%',
              position: 'absolute',
              bgcolor: (theme) => alpha(theme.palette.grey[900], 0.8),
            },
          }),
        }}
      >
        <Avatar src={account.photoURL} alt="photoURL" />
      </IconButton>

      <MenuPopover
        open={Boolean(open)}
        anchorEl={open}
        onClose={handleClose}
        sx={{
          p: 0,
          mt: 1.5,
          ml: 0.75,
          '& .MuiMenuItem-root': {
            typography: 'body2',
            borderRadius: 0.75,
          },
        }}
      >
        <Box sx={{ my: 1.5, px: 2.5 }}>
          <Typography variant="subtitle2" noWrap>
            {userInfo ? <>{userInfo.name}</> : 'John Doe'}
          </Typography>
          <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
            {userInfo ? <>{userInfo.email}</> : '[email protected]'}
          </Typography>
        </Box>

        <Divider sx={{ borderStyle: 'dashed' }} />

        <Stack sx={{ p: 1 }}>
          {MENU_OPTIONS.map((option) => (
            <MenuItem key={option.label} to={option.linkTo} component={RouterLink} onClick={handleClose}>
              {option.label}
            </MenuItem>
          ))}
        </Stack>

        <Divider sx={{ borderStyle: 'dashed' }} />

        <MenuItem onClick={logoutHandler} sx={{ m: 1 }}>
          Logout
        </MenuItem>
      </MenuPopover>
    </>
  );
}

function CPULineChart(props) {

  const CPUTooltip = tooltipProps => {
    if (tooltipProps && tooltipProps.payload && tooltipProps.payload.length > 0) {
      const { user, system, io, steal, interrupt, idle } = tooltipProps.payload[0].payload;
      const newPayload = [
        { name: 'User', value: user + "%" },
        { name: 'System', value: system + "%" },
        { name: 'IO', value: io + "%" },
        { name: 'Steal', value: steal + "%" },
        { name: 'Interrupt', value: interrupt + "%" },
        { name: 'Idle', value: idle + "%" },
      ];
      return <DefaultTooltipContent
        labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}
        payload={newPayload}
      />;
    }
    return <DefaultTooltipContent {...props} />;
  };

  const { classes, cpuPercent } = props;

  return (
    <div className={classes.root}>
      <Typography className={classes.chartTitle}>
        {cpuPercent.length > 0 && `CPU: ${(100 - cpuPercent[cpuPercent.length - 1].idle).toFixed(1)}%`}
      </Typography>
      <ResponsiveContainer width="100%" height={180} >
        <LineChart
          data={cpuPercent}
          margin={{ top: 0, right: 32, left: 10, bottom: 16 }}
        >
          <defs>
            <linearGradient id="gradientGreen" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#56ab2f"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#a8e063"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientBlue" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#2980B9"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#6DD5FA"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientOrange" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#FFB75E"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#ED8F03"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientGrey" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#8e9eab"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#eef2f3"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientRed" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#FF512F"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#DD2476"} stopOpacity={1}/>
            </linearGradient>
          </defs>
          <XAxis dataKey="usage" />
          <YAxis domain={[0, 100]}/>
          <Tooltip 
            isAnimationActive={false}
            content={<CPUTooltip />}
          />
          <Legend />
          <Line
            strokeWidth={4}
            type="monotone"
            dataKey="user"
            stroke={"url(#gradientGreen)"}
            isAnimationActive={false}
          />
          <Line
            strokeWidth={4}
            type="monotone"
            dataKey="system"
            stroke={"url(#gradientRed)"}
            isAnimationActive={false}
          />
          <Line
            strokeWidth={4}
            type="monotone"
            dataKey="io"
            stroke={"url(#gradientBlue)"}
            isAnimationActive={false}
          />
          <Line
            strokeWidth={4}
            type="monotone"
            dataKey="steal"
            stroke={"url(#gradientBlue)"}
            isAnimationActive={false}
          />
          <Line
            strokeWidth={4}
            type="monotone"
            dataKey="interrupt"
            stroke={"url(#gradientOrange)"}
            isAnimationActive={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}