@material-ui/styles#useTheme JavaScript Examples

SideDrawer = props => {
  const { className, ...rest } = props;
  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"), {
    defaultMatches: true
  });

  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      onClose={props.closed}
      open={props.open}
      variant={props.variant}
    >
      <div className={clsx(classes.root, className)}>
        {!isDesktop ? (
          <div className={styles.Logo}>
            <Logo />
          </div>
        ) : (
          ""
        )}
        {!isDesktop ? <Divider className={classes.divider} /> : ""}
        <nav>
          <NavigationItems className={classes.nav} />
        </nav>
      </div>
    </Drawer>
  );
}

export default function ApexLineChart() {
  var theme = useTheme();

  return (
    <ApexCharts
      options={themeOptions(theme)}
      series={series}
      type="area"
      height={350}
    />
  );
}

export default function ApexLineChart() {
  var theme = useTheme();

  return (
    <ApexCharts
      options={themeOptions(theme)}
      series={series}
      type="heatmap"
      height={350}
    />
  );
}

EmptyCertificates = () => {
  const styles = useStyles();
  const { palette } = useTheme();
  const { t } = useTranslation();

  const EmptyOrderImg = palette.type === 'light' ? EmptyCertificateLight : EmptyCertificateDark;

  return (
    <>
      <div className={styles.root} data-cy='empty-certificates-item'>
        <Typography className={styles.title} variant='h2'>
          {t('certificate.emptyTitle')}
        </Typography>
        <EmptyOrderImg alt='empty certificate icon' />
        <Link to={pathToGiftСertificate}>
          <Button className={styles.button} variant='contained'>
            {t('certificate.buy')}
          </Button>
        </Link>
      </div>
    </>
  );
}

function Typography({
  children,
  weight,
  size,
  colorBrightness,
  color,
  ...props
}) {
  var theme = useTheme();

  return (
    <TypographyBase
      style={{
        color: getColor(color, theme, colorBrightness),
        fontWeight: getFontWeight(weight),
        fontSize: getFontSize(size, props.variant, theme),
      }}
      {...props}
    >
      {children}
    </TypographyBase>
  );
}

function Badge({ children, colorBrightness, color, ...props }) {
  var classes = useStyles();
  var theme = useTheme();
  var Styled = createStyled({
    badge: {
      backgroundColor: getColor(color, theme, colorBrightness),
    },
  });

  return (
    <Styled>
      {styledProps => (
        <BadgeBase
          classes={{
            badge: classnames(classes.badge, styledProps.classes.badge),
          }}
          {...props}
        >
          {children}
        </BadgeBase>
      )}
    </Styled>
  );
}

export default function UserAvatar({ color = "primary", ...props }) {
  var classes = useStyles();
  var theme = useTheme();

  var letters = props.name
    .split(" ")
    .map(word => word[0])
    .join("");

  return (
    <div
      className={classes.avatar}
      style={{ backgroundColor: theme.palette[color].main }}
    >
      <Typography className={classes.text}>{letters}</Typography>
    </div>
  );
}

export default function Dot({ size, color }) {
  var classes = useStyles();
  var theme = useTheme();

  return (
    <div
      className={classnames(classes.dotBase, {
        [classes.dotLarge]: size === "large",
        [classes.dotSmall]: size === "small",
      })}
      style={{
        backgroundColor:
          color && theme.palette[color] && theme.palette[color].main,
      }}
    />
  );
}

InfoPage = () => {
  const theme = useTheme()
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: false
  })

  return (
    <>
      {!isDesktop &&
        <Suspense fallback={<CircularProgress />}>
          <InfoPageMobile />
        </Suspense>
      }
      {isDesktop &&
        <Suspense fallback={<CircularProgress />}>
          <InfoPageDesktop />
        </Suspense>}
    </>
  )
}

SimilarProductsItem = ({ imageUrl, id, rate, price, translationsKey }) => {
  const { t } = useTranslation();

  const [image, setImage] = useState(IMG_URL + imageUrl);
  const { palette } = useTheme();

  const isLightTheme = palette.type === 'light';

  useEffect(() => {
    getImage(imageUrl)
      .then((src) => setImage(src))
      .catch(() => setImage(isLightTheme ? productPlugLight : productPlugDark));
    return () => setImage('');
  }, [imageUrl, isLightTheme]);

  const styles = useStyles({ image, isLightTheme, palette });

  return (
    <Link to={`${pathToProducts}/${id}`}>
      <div className={styles.similarItem}>
        <div className={styles.info}>
          <span>{t(`${translationsKey}.name`)}</span>
          <div className={styles.priceOfSimilarProducts}>
            <span>{price}</span>
          </div>
          <Rating
            className={styles.rating}
            value={rate}
            readOnly
            emptyIcon={<StarBorderIcon className={styles.emptyStar} fontSize='inherit' />}
            size='small'
          />
        </div>
      </div>
    </Link>
  );
}

function Dashboard({ children }) {
  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
    defaultMatches: true
  });
  const [openSidebar, setOpenSidebar] = useState(false);

  const handleToggleSidebar = () => {
    setOpenSidebar(!openSidebar);
  };

  return (
    <div className={classes.root}>
      <TopBar openSidebar={openSidebar} onToggleSidebar={handleToggleSidebar} />
      <Sidebar
        onClose={handleToggleSidebar}
        open={openSidebar}
        variant={isDesktop ? 'persistent' : 'temporary'}
      />
      <main className={clsx({ [classes.contentShift]: openSidebar, [classes.content]: true })}>
        {children}
        <Footer />
      </main>
    </div>
  );
}

ErrorPage = () => {
  const dispatch = useDispatch();
  const { t } = useTranslation();

  const { errorMessage } = useSelector(({ Error }) => ({
    errorMessage: Error.error
  }));

  useEffect(() => {
    if (!errorMessage) {
      dispatch(push('/'));
    }
  }, [dispatch, errorMessage]);

  const styles = useStyles();
  const { palette } = useTheme();

  const isLightTheme = palette.type === 'light';

  const errorImagePath = isLightTheme ? ERROR_PAGE_IMAGES.light : ERROR_PAGE_IMAGES.dark;

  return (
    <div className={styles.wrapper}>
      <div className={styles.error}>
        <img
          className={styles.errorImage}
          src={errorImagePath}
          alt={t('errorPage.pageMessage.DEFAULT_ERROR')}
        />
        <div className={styles.info}>
          <h2>
            {errorMessage && errorPage.pageMessage[errorMessage.error]
              ? t(`errorPage.pageMessage.${errorMessage.error}`)
              : t('errorPage.pageMessage.DEFAULT_ERROR')}
          </h2>

          <Link to='/' onClick={() => window.location.reload()}>
            <Button variant='contained'>{t('errorPage.linkToHomePage')}</Button>
          </Link>
        </div>
      </div>
    </div>
  );
}

Materials = () => {
  const [patternImages, setPatternImages] = useState([]);
  const { t } = useTranslation();
  const { palette } = useTheme();

  const styles = useStyles();
  const appStyles = useAppStyles();

  const isLightTheme = palette.type === 'light';

  const {
    loading: loadingPatterns,
    error: errorPatterns,
    data: dataPattern
  } = useQuery(getAllPatterns, {});
  const patterns = useMemo(
    () => (loadingPatterns ? [] : dataPattern.getAllPatterns.items),
    [loadingPatterns, dataPattern]
  );

  const initImages = useMemo(() => patterns.map((e) => e.images.small), [patterns]);

  useEffect(() => {
    const initialPhotos = async () => {
      const mapImages = await Promise.all(
        initImages.map(async (item) => {
          try {
            return await getImage(item);
          } catch (e) {
            return isLightTheme ? productPlugLight : productPlugDark;
          }
        })
      );

      setPatternImages(mapImages);
    };

    initialPhotos();
  }, [loadingPatterns, initImages, isLightTheme]);

  const {
    loading: loadingTextile,
    error: errorTextile,
    data: dataTextile
  } = useQuery(getMaterialsBlocksByType, {
    variables: { type: 'main', limit: 0, skip: 0 }
  });

  const materialsTextile = dataTextile?.getMaterialsBlocksByType.items || [];

  const {
    loading: loadingBottom,
    error: errorBottom,
    data: dataBottom
  } = useQuery(getMaterialsBlocksByType, {
    variables: { type: 'bottom', limit: 0, skip: 0 }
  });

  const materialsBottom = dataBottom?.getMaterialsBlocksByType.items || [];

  const { isLoading, isError } = useIsLoadingOrError(
    [loadingPatterns, loadingTextile, loadingBottom],
    [errorPatterns, errorTextile, errorBottom]
  );
  if (isLoading || isError) return errorOrLoadingHandler(isError, isLoading);

  return (
    <div className={`${appStyles.rootApp} ${styles.root}`}>
      <div className={appStyles.containerApp}>
        <h1 className={styles.title}>{t(`materialsPage.materials`)}</h1>
        <Slider sliderlImages={patternImages} patterns={patterns} />
        <MaterialsTextile materialsTextile={materialsTextile} />
        <MaterialsBottom materialsBottom={materialsBottom} />
      </div>
    </div>
  );
}

ProductListItem = ({ product }) => {
  const { t } = useTranslation();
  const { palette } = useTheme();

  const { getPriceWithCurrency, getCurrencySign } = useCurrency();

  const currencySign = getCurrencySign();

  const [image, setImage] = useState(IMG_URL + product.images.primary.small);

  const { pathToProducts } = routes;
  const isLightTheme = palette.type === 'light';

  useEffect(() => {
    getImage(product.images.primary.small)
      .then((src) => setImage(src))
      .catch(() => setImage(isLightTheme ? productPlugLight : productPlugDark));

    return () => setImage(null);
  }, [isLightTheme, product.images.primary.small]);

  const checkDisabledProduct = () => {
    const availableSizes = product.sizes.filter(
      ({ size, price }) => size.available && { size, price }
    );

    const priceWithCurrency = getPriceWithCurrency(availableSizes[0]?.price);

    return product.available ? (
      <div className={styles.price}>
        <div>
          {t('common.from') + priceWithCurrency}
          {'\u00A0'}
        </div>
        <div className={styles.currency}>{currencySign}</div>
      </div>
    ) : (
      <div className={styles.unavailableText}>{t('product.unavailable')}</div>
    );
  };

  const styles = useStyles({ image });
  return (
    <Grid item xs={12} sm={6} md={6} lg={4} className={styles.wrapper} data-testid='product'>
      <Link to={`${pathToProducts}/${product._id}`}>
        <div className={styles.productItem}>
          {product.available ? '' : <div className={styles.unavailableContainer} />}
          <div className={styles.name}>
            <StarRating size='small' readOnly rate={product.rate} />
            <div>
              <span className={styles.title}>
                {t(`${product.translationsKey}.name`)}
                <span className={styles.price}>{checkDisabledProduct()}</span>
              </span>
            </div>
          </div>
        </div>
      </Link>
    </Grid>
  );
}

export default function Notification({ variant, ...props }) {
  var classes = useStyles();
  var theme = useTheme();

  const icon = getIconByType(props.type);
  const iconWithStyles = React.cloneElement(icon, {
    classes: {
      root: classes.notificationIcon,
    },
    style: {
      color:
        variant !== "contained" &&
        theme.palette[props.color] &&
        theme.palette[props.color].main,
    },
  });

  return (
    <div
      className={classnames(classes.notificationContainer, props.className, {
        [classes.notificationContained]: variant === "contained",
        [classes.notificationContainedShadowless]: props.shadowless,
      })}
      style={{
        backgroundColor:
          variant === "contained" &&
          theme.palette[props.color] &&
          theme.palette[props.color].main,
      }}
    >
      <div
        className={classnames(classes.notificationIconContainer, {
          [classes.notificationIconContainerContained]: variant === "contained",
          [classes.notificationIconContainerRounded]: variant === "rounded",
        })}
        style={{
          backgroundColor:
            variant === "rounded" &&
            theme.palette[props.color] &&
            tinycolor(theme.palette[props.color].main)
              .setAlpha(0.15)
              .toRgbString(),
        }}
      >
        {iconWithStyles}
      </div>
      <div className={classes.messageContainer}>
        <Typography
          className={classnames({
            [classes.containedTypography]: variant === "contained",
          })}
          variant={props.typographyVariant}
          size={variant !== "contained" && !props.typographyVariant && "md"}
        >
          {props.message}
        </Typography>
        {props.extraButton && props.extraButtonClick && (
          <Button
            onClick={props.extraButtonClick}
            disableRipple
            className={classes.extraButton}
          >
            {props.extraButton}
          </Button>
        )}
      </div>
    </div>
  );
}

function Sidebar({ location }) {
  var classes = useStyles();
  var theme = useTheme();

  // global
  var { isSidebarOpened } = useLayoutState();
  var layoutDispatch = useLayoutDispatch();

  // local
  var [isPermanent, setPermanent] = useState(true);

  useEffect(function() {
    window.addEventListener("resize", handleWindowWidthChange);
    handleWindowWidthChange();
    return function cleanup() {
      window.removeEventListener("resize", handleWindowWidthChange);
    };
  });

  return (
    <Drawer
      variant={isPermanent ? "permanent" : "temporary"}
      className={classNames(classes.drawer, {
        [classes.drawerOpen]: isSidebarOpened,
        [classes.drawerClose]: !isSidebarOpened,
      })}
      classes={{
        paper: classNames({
          [classes.drawerOpen]: isSidebarOpened,
          [classes.drawerClose]: !isSidebarOpened,
        }),
      }}
      open={isSidebarOpened}
    >
      <div className={classes.toolbar} />
      <div className={classes.mobileBackButton}>
        <IconButton onClick={() => toggleSidebar(layoutDispatch)}>
          <ArrowBackIcon
            classes={{
              root: classNames(classes.headerIcon, classes.headerIconCollapse),
            }}
          />
        </IconButton>
      </div>
      <List className={classes.sidebarList}>
        {structure.map(link => (
          <SidebarLink
            key={link.id}
            location={location}
            isSidebarOpened={isSidebarOpened}
            {...link}
          />
        ))}
      </List>
    </Drawer>
  );

  // ##################################################################
  function handleWindowWidthChange() {
    var windowWidth = window.innerWidth;
    var breakpointWidth = theme.breakpoints.values.md;
    var isSmallScreen = windowWidth < breakpointWidth;

    if (isSmallScreen && isPermanent) {
      setPermanent(false);
    } else if (!isSmallScreen && !isPermanent) {
      setPermanent(true);
    }
  }
}

function Button({ children, color, className, ...props }) {
  var theme = useTheme();

  var Styled = createStyled({
    root: {
      color: getColor(color, theme),
    },
    contained: {
      backgroundColor: getColor(color, theme),
      boxShadow: theme.customShadows.widget,
      color: `${color ? "white" : theme.palette.text.primary} !important`,
      "&:hover": {
        backgroundColor: getColor(color, theme, "light"),
        boxShadow: theme.customShadows.widgetWide,
      },
      "&:active": {
        boxShadow: theme.customShadows.widgetWide,
      },
    },
    outlined: {
      color: getColor(color, theme),
      borderColor: getColor(color, theme),
    },
    select: {
      backgroundColor: theme.palette.primary.main,
      color: "#fff",
    },
  });

  return (
    <Styled>
      {({ classes }) => (
        <ButtonBase
          classes={{
            contained: classes.contained,
            root: classes.root,
            outlined: classes.outlined,
          }}
          {...props}
          className={classnames(
            {
              [classes.select]: props.select,
            },
            className,
          )}
        >
          {children}
        </ButtonBase>
      )}
    </Styled>
  );
}

Layout = props => {
  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"), {
    defaultMatches: true
  });

  const [showSideDrawer, setShowSideDrawer] = useState(false);

  const sideDrawerClosedHandler = () => {
    setShowSideDrawer(false);
  };

  const sideDrawerToggleHandler = () => {
    setShowSideDrawer(!showSideDrawer);
  };

  const shouldOpenSidebar = isDesktop ? true : showSideDrawer;

  return (
    <div
      className={clsx({
        [classes.root]: true,
        [classes.shiftContent]: isDesktop
      })}
    >
      <Toolbar drawerToggleClicked={sideDrawerToggleHandler} />
      <SideDrawer
        open={shouldOpenSidebar}
        variant={isDesktop ? "persistent" : "temporary"}
        closed={sideDrawerClosedHandler}
      />
      <main>
        <Dashlet container={props.container} breadcrumbs={props.breadcrumbs}>
          {props.children}
        </Dashlet>
      </main>
    </div>
  );
}

Main = ({ children, sidebarContent, topbarContent, sideBarPosition }) => {
  const classes = useStyles()
  const theme = useTheme()
  const [openSidebar, setOpenSidebar] = useState(false)
  const location = useLocation()
  const isHome = location.pathname === '/'
  const isDesktop = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true
  })

  useEffect(() => {
    setOpenSidebar(false)
  }, [sideBarPosition])

  return (
    <Container
      component="main"
      maxWidth={false}
      className={clsx(classes.root, {
        [classes.paddingHome]: isDesktop && isHome
      })}
    >
      <ChangeAppBarColorOnScroll
        isDesktop={isDesktop}
        setOpenSidebar={setOpenSidebar}
        openSidebar={openSidebar}
        isHome={isHome}
        topbarContent={topbarContent}
      />
      <Drawer
        anchor="left"
        classes={{ paper: classes.drawerPaper }}
        onClose={() => setOpenSidebar(false)}
        open={openSidebar}
        className={clsx({
          [classes.drawer]: true,
          [classes.drawerDesktop]: isDesktop && openSidebar
        })}
      >
        <div className={classes.drawerContent}>{sidebarContent}</div>
      </Drawer>
      {children}
    </Container>
  )
}

Main = props => {
  const { children } = props;

  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
    defaultMatches: true
  });

  const [openSidebar, setOpenSidebar] = useState(false);

  const handleSidebarOpen = () => {
    setOpenSidebar(true);
  };

  const handleSidebarClose = () => {
    setOpenSidebar(false);
  };

  const shouldOpenSidebar = isDesktop ? true : openSidebar;

  return (
    <div
      className={clsx({
        [classes.root]: true,
        [classes.shiftContent]: isDesktop
      })}
    >
      <Topbar onSidebarOpen={handleSidebarOpen} />
      <Sidebar
        onClose={handleSidebarClose}
        open={shouldOpenSidebar}
        variant={isDesktop ? 'persistent' : 'temporary'}
      />
      <main className={classes.content}>
        {children}
        <Footer />
      </main>
    </div>
  );
}

ResendComponent = ({ open, handlerOpen, handlerSendEmail }) => {
  const { t } = useTranslation('translations')
  const theme = useTheme()
  const classes = useStyles()


  const isDesktop = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true
  })


  const resendEmail = () => {
    handlerSendEmail()
    handlerOpen(false)
  }

  return (
    <Dialog
      open={open}
      onClose={handlerOpen}
      fullScreen={!isDesktop}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500
      }}
    >
      <Box className={classes.dialog}>
        <Box className={classes.closeIcon}>
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={handlerOpen}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        </Box>
      </Box>
      <Box className={classes.box}>
        <Box>
          <Typography className={classes.title}>
            {t('login.verify')}
          </Typography>
          <Typography className={classes.subTitle}>
            {t('login.textVerify')}
          </Typography>
        </Box>
        <Button
          className={classes.mainButton}
          variant="contained"
          color="secondary"
          onClick={resendEmail}
        >
          {t('login.resend')}</Button>
      </Box>
    </Dialog>
  )
}

SearchBarListItem = ({ product }) => {
  const { getPriceWithCurrency } = useCurrency();
  const { currency } = useContext(CurrencyContext);
  const { t } = useTranslation();

  const [image, setImage] = useState(IMG_URL + product.images.primary.small);
  const dispatch = useDispatch();
  const styles = useStyles({ image });
  const { palette } = useTheme();

  const isLightTheme = palette.type === 'light';

  useEffect(() => {
    getImage(product.images.primary.small)
      .then((src) => setImage(src))
      .catch(() => setImage(isLightTheme ? productPlugLight : productPlugDark));

    return () => setImage(null);
  }, [isLightTheme, product.images.primary.small]);

  return (
    <div className={styles.searchBarListItem}>
      <div data-testid='image' className={styles.image} style={{ backgroundSize: 'cover' }} />
      <div className={styles.content}>
        <div className={styles.title}>
          <Typography variant='h4'>{t(`${product.translationsKey}.name`)}</Typography>
          <div>
            {Math.min(...product.sizes.map((size) => getPriceWithCurrency(size.price)))} {currency}
          </div>
        </div>
        <div className={styles.buttons}>
          <ClassicButton
            buttonType='button'
            innerText={t('common.details')}
            onClickHandler={() => dispatch(push(`${pathToProducts}/${product._id}`))}
            buttonStyle='classic'
          />
        </div>
      </div>
    </div>
  );
}

function TablePaginationActions(props) {
  const classes = useStyles1();
  const theme = useTheme();
  const { count, page, rowsPerPage, onChangePage } = props;

  const handleFirstPageButtonClick = event => {
    onChangePage(event, 0);
  };

  const handleBackButtonClick = event => {
    onChangePage(event, page - 1);
  };

  const handleNextButtonClick = event => {
    onChangePage(event, page + 1);
  };

  const handleLastPageButtonClick = event => {
    onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };

  return (
    <div className={classes.root}>
      <IconButton
        onClick={handleFirstPageButtonClick}
        disabled={page === 0}
        aria-label="first page"
      >
        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
      </IconButton>
      <IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
      </IconButton>
      <IconButton
        onClick={handleNextButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="next page"
      >
        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
      </IconButton>
      <IconButton
        onClick={handleLastPageButtonClick}
        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
        aria-label="last page"
      >
        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
      </IconButton>
    </div>
  );
}

ProductImages = ({ images }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [imagesSet, setImagesSet] = useState([]);
  const [currImg, setCurrImg] = useState(0);

  const [primaryImage, setPrimaryImage] = useState(0);
  const [secondaryImages, setSecondaryImages] = useState([]);

  const [loading, setLoading] = useState(false);

  const { t } = useTranslation();
  const { palette } = useTheme();

  const isLightTheme = palette.type === 'light';

  const initImages = useMemo(
    () => [images.primary.small, ...images.additional.map(({ small }) => small)],
    [images.primary.small, images.additional]
  );

  useEffect(() => {
    const initialPhotos = async () => {
      setLoading(true);
      const mapImages = await Promise.all(
        initImages.map(async (item) => {
          try {
            const result = await getImage(item);
            return { src: result };
          } catch (e) {
            return { src: isLightTheme ? productPlugLight : productPlugDark };
          }
        })
      );

      setImagesSet(mapImages);
      setLoading(false);
    };
    initialPhotos();
  }, [isLightTheme, initImages]);

  useEffect(() => {
    setSecondaryImages(imagesSet.slice(1, images.length));
  }, [imagesSet, images.length]);

  useEffect(() => {
    const updatedSecondaryImages = imagesSet.filter((_, i) => i !== primaryImage);
    setSecondaryImages(updatedSecondaryImages);
  }, [primaryImage, imagesSet]);

  const styles = useStyles();

  const openImage = (idx) => {
    setIsOpen(true);
    setCurrImg(idx);
  };

  const sideImages = secondaryImages
    .filter((_, i) => i < 3)
    .map((image, i) => {
      if (i === imagesSet.length || i === 2) {
        return (
          <div className={styles.lastImagesBox} key={i} onClick={() => openImage(i + 1)}>
            <div className={styles.lastImageText}>
              {t('product.allPhotos.viewAll')} {`(${images.additional.length})`}{' '}
              {t('product.allPhotos.photo')}
            </div>
            <img
              className={styles.lastImage}
              src={image.src}
              alt={t('product.imgAltInfo')}
              data-cy='image'
            />
          </div>
        );
      }
      return (
        <div key={i} className={styles.imageItem}>
          <img
            className={styles.sideImage}
            src={image.src}
            alt={t('product.imgAltInfo')}
            onClick={() => setPrimaryImage(imagesSet.indexOf(secondaryImages[i]))}
            data-cy='image'
          />
        </div>
      );
    });

  const nextImg = () => {
    setPrimaryImage((prev) => prev + 1);
  };

  const prevImg = () => {
    setPrimaryImage((prev) => prev - 1);
  };

  return (
    <div className={styles.imageBody}>
      <ImgsViewer
        imgs={imagesSet}
        currImg={currImg}
        showThumbnails
        isOpen={isOpen}
        onClickPrev={() => setCurrImg((prev) => prev - 1)}
        onClickNext={() => setCurrImg((prev) => prev + 1)}
        onClickThumbnail={(index) => setCurrImg(index)}
        onClose={() => setIsOpen(false)}
        closeBtnTitle={t('common.close')}
        leftArrowTitle={t('common.prev')}
        rightArrowTitle={t('common.next')}
      />
      <div className={styles.images}>
        <div className={styles.imagePreviewContainer}>
          <button className={styles.circle} onClick={prevImg} disabled={primaryImage === 0}>
            <ArrowBackIosRounded />
          </button>
          <div className={styles.imageContainer}>
            {loading ? (
              <Loader heightWrap='100px' />
            ) : (
              <img
                src={imagesSet[primaryImage]?.src}
                className={styles.primaryImage}
                alt={t('product.imgAltInfo')}
              />
            )}
          </div>
          <button
            className={styles.circle}
            onClick={nextImg}
            disabled={primaryImage === initImages.length - 1}
          >
            <ArrowForwardIosRounded />
          </button>
        </div>
        <div className={styles.additionalImagePreview}>{sideImages}</div>
      </div>
    </div>
  );
}

AuthHeader = (props) => {
  const classes = useStyles(props);
  const { darkMode, setDarkMode } = useContext(DarkThemeContext);

  const [value, setValue] = useState(0);
  const theme = useTheme();

  const matches = useMediaQuery(theme.breakpoints.down("sm"));

  const handleChange = (newValues) => {
    setValue(newValues);
  };
  const location = useLocation();

  useEffect(() => {
    if (location.pathname === "/" && value !== 0) {
      setValue(0);
    } else if (location.pathname === "/subject" && value !== 1) {
      setValue(1);
    } else if (location.pathname === "/semester" && value !== 2) {
      setValue(2);
    } else if (location.pathname === "/about" && value !== 3) {
      setValue(3);
    }
  }, [value, location]);

  const renderAdminTab = () => {
    if (!matches && props.isAuthenticated) {
      return (
        <React.Fragment>
          <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
            <Tab value={0} component={Link} to="/" label="Today" />
            <Tab value={1} component={Link} to="/subject" label="Subjects" />
            <Tab value={2} component={Link} to="/semester" label="Semester" />
            <Tab value={3} component={Link} to="/about" label="About" />
          </Tabs>
        </React.Fragment>
      );
    }
  };

  const renderAdminBottomTab = () => {
    if (matches && props.isAuthenticated) {
      return (
        <React.Fragment>
          <MobileNavigation />
        </React.Fragment>
      );
    }
  };

  return (
    <React.Fragment>
      <CssBaseline />
      <ElevationScroll>
        <AppBar color="secondary" className={classes.AppBar}>
          <Toolbar disableGutters>
            <Button
              onClick={() => setValue(0)}
              className={classes.Button}
              value={0}
              component={Link}
              to="/"
              disableRipple
            >
              <Typography variant="h5" className={classes.logo}>
                BUNK MANAGER
              </Typography>
            </Button>
            {props.tablePage? null: renderAdminTab()} 
            {props.isAuthenticated && <Button
              onClick={() => props.logoutUser()}
              className={classes.logout} variant="contained" color="primary">
              LOGOUT
            </Button>}
            {/* Switch to change the theme */}
            {/* <Switch
              color="primary"
              checked={darkMode}
              onChange={() => setDarkMode(!darkMode)}
            /> */}
          </Toolbar>
        </AppBar>
      </ElevationScroll>
      <div className={classes.toolBar} />
      {renderAdminBottomTab()}
    </React.Fragment>
  );
}

LanguageSelector = ({ alt }) => {
  const classes = useStyles()
  const { i18n } = useTranslation('translations')
  const [anchorEl, setAnchorEl] = useState(null)
  const theme = useTheme()
  const location = useLocation()
  const isHome = location.pathname === '/'
  const [currentUser] = useUser()
  const [changeLanguageMutation] = useMutation(CHANGE_LANGUAGE)

  const trigger = useScrollTrigger({
    target: window || undefined,
    disableHysteresis: true
  })

  const isDesktop = useMediaQuery(theme.breakpoints.up('md'), {
    defaultMatches: true
  })

  const useTransparentBG = isDesktop && !trigger && isHome

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = (item) => {
    setAnchorEl(null)
    if (typeof item === 'string') i18n.changeLanguage(item)
  }

  const languages = [
    {
      value: 'es',
      label: 'Español'
    },
    {
      value: 'en',
      label: 'English'
    }
  ]

  const changeLanguage = (item) => {
    changeLanguageMutation({
      variables: {
        account: currentUser.account,
        language: item.value
      }
    })
    handleClose(item.value)
  }

  return (
    <>
      {alt && (
        <>
          <FormControl
            variant="filled"
            className={classes.selector}
          >
            <InputLabel id="select-label">
              {((i18n.language || '').toLocaleUpperCase() === "EN") ? "English" : "Español"}
            </InputLabel>
            <Select
              labelId="bussines-type-label"
              id="bussines-type"
              onChange={handleClick}
            >
              {languages.length &&
                languages.map((item) => (
                  <MenuItem
                    key={`language-menu-${item.label}`}
                    onClick={() => changeLanguage(item)}
                  >
                    {`${item.label} - ${(item.value || '').toLocaleUpperCase()}`}
                  </MenuItem>
                ))}
            </Select>
          </FormControl>
        </>
      )
      }
      {!alt && (
        <>
          <IconButton className={classes.wrapper} onClick={handleClick}>
            <LanguageIcon
              alt={alt}
              className={clsx(classes.iconLanguage, {
                [classes.iconLanguageTransparent]: useTransparentBG
              })}
            />
            <Typography
              variant="h5"
              className={clsx(classes.languageText, {
                [classes.languageTextTransparent]: useTransparentBG
              })}
            >
              {(i18n.language || '').toLocaleUpperCase().substring(0, 2)}
            </Typography>
          </IconButton>
          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
            {languages.length &&
              languages.map((item) => (
                <MenuItem
                  key={`language-menu-${item.label}`}
                  onClick={() => handleClose(item.value)}
                >
                  {`${item.label} - ${(item.value || '').toLocaleUpperCase()}`}
                </MenuItem>
              ))}
          </Menu>
        </>
      )
      }
    </>
  )
}

function NavigationItems(props) {
  var mount = false;
  const [open, setOpen] = React.useState(true);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [moduleStates, setModuleStates] = React.useState({});
  const [modules, setModules] = React.useState([]);
  const isMobile = window.innerWidth < 500;
  const { className, ...rest } = props;
  const theme = useTheme();
  const [openMenu, setOpenMenu] = React.useState(true);
  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"), {
    defaultMatches: true,
  });

  const classes = useStyles();

  useEffect(() => {
    if (
      !props.location.pathname.includes("/members") ||
      !props.location.pathname.includes("/activities") ||
      !props.location.pathname.includes("/loans") ||
      !props.location.pathname.includes("/users") ||
      !props.location.pathname.includes("/reports") ||
      !props.location.pathname.includes("/summary-report") ||
      !props.location.pathname.includes("/activity-report") ||
      props.location.pathname !== "/"
    ) {
      if (openMenu !== true) {
        setOpenMenu(true);
      }
    } else {
      setOpenMenu(false);
    }
    if (
      props.location.pathname.includes("/members") ||
      props.location.pathname.includes("/activities") ||
      props.location.pathname.includes("/loans") ||
      props.location.pathname.includes("/users") ||
      props.location.pathname.includes("/reports") ||
      props.location.pathname.includes("/summary-report") ||
      props.location.pathname.includes("/activity-report") ||
      props.location.pathname === "/"
    ) {
      if (openMenu == true) {
        setOpenMenu(false);
      }
    } else {
      setOpenMenu(true);
    }
  }, []);

  const updateMenuItemState = (moduleId) => {
    let moduleStatesArr = { ...moduleStates };
    map(modules, (module, key) => {
      if (module.id === moduleId)
        moduleStatesArr[module.id]["open"] = !moduleStates[module.id]["open"];
    });
    setModuleStates(moduleStatesArr);
  };

  const handleClick = () => {
    setOpenMenu(!openMenu);
  };

  const masterMenu = () => {
    return renderSideMenu1();
    return masterMenu;
  };

  const renderSideMenu1 = () => {
    let masterMenu = [];
    let otherMenu = [];
    let moduleArray = [
      "Fpos",
      "SHGs",
      "Villages",
      "Village Organizations",
      "States",
      "Pgs",
      "Countries",
      "Loan Purpose",
      "Activity Types",
    ];
    let nav1 = map(modules, (module, key) => {
      if (module.modules.length <= 0) {
        if (moduleArray.includes(module.name)) {
          masterMenu.push(
            <Collapse in={openMenu} timeout="auto" unmountOnExit>
              <ListItem className={clsx(classes.subMenuList, className)}>
                <NavigationItem link={module.url} text={module.name} />
              </ListItem>
            </Collapse>
          );
        } else {
          otherMenu.push(
            <NavigationItem
              link={module.url}
              text={module.name}
              icon={module.icon_class}
            />
          );
        }
      } else {
        return (
          <div>
            <NavigationItem
              text={module.name}
              icon={module.icon_class}
              showopen="true"
              open={moduleStates[module["id"]].open}
              clicked={() => updateMenuItemState(module.id)}
            />
            <Collapse
              in={moduleStates[module["id"]].open}
              timeout="auto"
              unmountOnExit
            >
              <List component="div" disablePadding>
                {map(module.modules, (submodule, subkey) => {
                  return (
                    <NavigationItem
                      link={submodule.url}
                      text={submodule.name}
                      icon={submodule.icon_class}
                      nested="true"
                    />
                  );
                })}
              </List>
            </Collapse>
          </div>
        );
      }
    });
    return (
      <React.Fragment>
        {otherMenu}
        {auth.getUserInfo().role.name !== "CSP (Community Service Provider)" ? (
          <List
            subheader={
              <ListSubheader
                component="div"
                id="nested-list-subheader"
                button
                onClick={handleClick}
                className={clsx(classes.masterMenuSubHeader, className)}
              >
                <QueuePlayNextIcon
                  className={clsx(classes.masterMenuIcon, className)}
                ></QueuePlayNextIcon>
                <span
                  id="master-menu-label"
                  className={clsx(classes.masterMenuSpan, className)}
                >
                  Masters{" "}
                </span>
                {openMenu ? (
                  <ExpandMore
                    className={clsx(classes.masterMenuExtendIcon, className)}
                  />
                ) : (
                  <ArrowForwardIosIcon
                    style={{ fontSize: "medium" }}
                    className={clsx(classes.masterMenuExtendIcon, className)}
                  />
                )}
              </ListSubheader>
            }
          >
            {masterMenu}
          </List>
        ) : (
          ""
        )}
      </React.Fragment>
    );
  };

  const renderSideMenu = () => {
    let nav = map(modules, (module, key) => {
      if (module.modules.length <= 0) {
        return (
          <NavigationItem
            link={module.url}
            text={module.name}
            icon={module.icon_class}
          />
        );
      } else {
        return (
          <div>
            <NavigationItem
              text={module.name}
              icon={module.icon_class}
              showopen="true"
              open={moduleStates[module["id"]].open}
              clicked={() => updateMenuItemState(module.id)}
            />
            <Collapse
              in={moduleStates[module["id"]].open}
              timeout="auto"
              unmountOnExit
            >
              <List component="div" disablePadding>
                {map(module.modules, (submodule, subkey) => {
                  return (
                    <NavigationItem
                      link={submodule.url}
                      text={submodule.name}
                      icon={submodule.icon_class}
                      nested="true"
                    />
                  );
                })}
              </List>
            </Collapse>
          </div>
        );
      }
    });
    return nav;
  };

  useEffect(() => {
    let userInfo = auth.getUserInfo();
    mount = true;
    const fetchData = async () => {
      await axios
        .get(
          process.env.REACT_APP_SERVER_URL +
            "modules?_sort=order:ASC&module_null=true&displayNavigation=true&is_active=true&roles.id_in=" +
            userInfo.role.id,
          {
            headers: {
              Authorization: "Bearer " + auth.getToken(),
            },
          }
        )
        .then((res) => {
          let moduleStatesArr = {};
          map(res.data, (module, key) => {
            if (module.id in moduleStatesArr === false)
              moduleStatesArr[module.id] = {};
            moduleStatesArr[module.id] = { open: false };
          });
          if (mount) setModuleStates(moduleStatesArr);
          if (mount) setModules(res.data);
        });
    };
    fetchData();
    return () => {
      mount = false;
    };
  }, []);

  return (
    <Aux>
      <List component="nav" className={clsx(classes.root, className)}>
        {masterMenu()}
        {!isDesktop ? (
          <Aux>
            <NavigationItem
              link="/my-account"
              text="My account"
              icon="account_circle"
            />
            <NavigationItem
              clicked={() => {
                auth.clearAppStorage();
                props.history.push("/login");
              }}
              link="javascript:void(0);"
              text="Logout"
              icon="exit_to_app"
            />
          </Aux>
        ) : (
          ""
        )}
      </List>
    </Aux>
  );
}

export default function BigStat(props) {
  var { product, total, color, registrations, bounce } = props;
  var classes = useStyles();
  var theme = useTheme();

  // local
  var [value, setValue] = useState("daily");

  return (
    <Widget
      header={
        <div className={classes.title}>
          <Typography variant="h5">{product}</Typography>

          <Select
            value={value}
            onChange={e => setValue(e.target.value)}
            input={
              <Input
                disableUnderline
                classes={{ input: classes.selectInput }}
              />
            }
            className={classes.select}
          >
            <MenuItem value="daily">Daily</MenuItem>
            <MenuItem value="weekly">Weekly</MenuItem>
            <MenuItem value="monthly">Monthly</MenuItem>
          </Select>
        </div>
      }
      upperTitle
      bodyClass={classes.bodyWidgetOverflow}
    >
      <div className={classes.totalValueContainer}>
        <div className={classes.totalValue}>
          <Typography size="xxl" color="text" colorBrightness="secondary">
            {total[value]}
          </Typography>
          <Typography color={total.percent.profit ? "success" : "secondary"}>
            &nbsp;{total.percent.profit ? "+" : "-"}
            {total.percent.value}%
          </Typography>
        </div>
        <BarChart width={150} height={70} data={getRandomData()}>
          <Bar
            dataKey="value"
            fill={theme.palette[color].main}
            radius={10}
            barSize={10}
          />
        </BarChart>
      </div>
      <div className={classes.bottomStatsContainer}>
        <div className={classnames(classes.statCell, classes.borderRight)}>
          <Grid container alignItems="center">
            <Typography variant="h6">{registrations[value].value}</Typography>
            <ArrowForwardIcon
              className={classnames(classes.profitArrow, {
                [!registrations[value].profit]: classes.profitArrowDanger,
              })}
            />
          </Grid>
          <Typography size="sm" color="text" colorBrightness="secondary">
            Registrations
          </Typography>
        </div>
        <div className={classes.statCell}>
          <Grid container alignItems="center">
            <Typography variant="h6">{bounce[value].value}%</Typography>
            <ArrowForwardIcon
              className={classnames(classes.profitArrow, {
                [!registrations[value].profit]: classes.profitArrowDanger,
              })}
            />
          </Grid>
          <Typography size="sm" color="text" colorBrightness="secondary">
            Bounce Rate
          </Typography>
        </div>
        <div className={classnames(classes.statCell, classes.borderRight)}>
          <Grid container alignItems="center">
            <Typography variant="h6">
              {registrations[value].value * 10}
            </Typography>
            <ArrowForwardIcon
              className={classnames(classes.profitArrow, {
                [classes.profitArrowDanger]: !registrations[value].profit,
              })}
            />
          </Grid>
          <Typography size="sm" color="text" colorBrightness="secondary">
            Views
          </Typography>
        </div>
      </div>
    </Widget>
  );
}

export default function Dashboard(props) {
  var classes = useStyles();
  var theme = useTheme();

  // local
  var [mainChartState, setMainChartState] = useState("monthly");

  return (
    <>
      <PageTitle title="Dashboard" button={<Button
      variant="contained"
      size="medium"
      color="secondary"
    >
        Latest Reports
    </Button>} />
      <Grid container spacing={4}>
        <Grid item lg={3} md={4} sm={6} xs={12}>
          <Widget
            title="Visits Today"
            upperTitle
            bodyClass={classes.fullHeightBody}
            className={classes.card}
          >
            <div className={classes.visitsNumberContainer}>
              <Grid container item alignItems={"center"}>
                <Grid item xs={6}>
              <Typography size="xl" weight="medium" noWrap>
                12, 678
              </Typography>
                </Grid>
                <Grid item xs={6}>
              <LineChart
                width={100}
                height={30}
                data={[
                  { value: 10 },
                  { value: 15 },
                  { value: 10 },
                  { value: 17 },
                  { value: 18 },
                ]}
              >
                <Line
                  type="natural"
                  dataKey="value"
                  stroke={theme.palette.success.main}
                  strokeWidth={2}
                  dot={false}
                />
              </LineChart>
                </Grid>
              </Grid>
            </div>
            <Grid
              container
              direction="row"
              justify="space-between"
              alignItems="center"
            >
              <Grid item xs={4}>
                <Typography color="text" colorBrightness="secondary" noWrap>
                  Registrations
                </Typography>
                <Typography size="md">860</Typography>
              </Grid>
              <Grid item xs={4}>
                <Typography color="text" colorBrightness="secondary" noWrap>
                  Sign Out
                </Typography>
                <Typography size="md">32</Typography>
              </Grid>
              <Grid item xs={4}>
                <Typography color="text" colorBrightness="secondary" noWrap>
                  Rate
                </Typography>
                <Typography size="md">3.25%</Typography>
              </Grid>
            </Grid>
          </Widget>
        </Grid>
        <Grid item lg={3} md={8} sm={6} xs={12}>
          <Widget
            title="App Performance"
            upperTitle
            className={classes.card}
            bodyClass={classes.fullHeightBody}
          >
            <div className={classes.performanceLegendWrapper}>
              <div className={classes.legendElement}>
                <Dot color="warning" />
                <Typography
                  color="text"
                  colorBrightness="secondary"
                  className={classes.legendElementText}
                >
                  Integration
                </Typography>
              </div>
              <div className={classes.legendElement}>
                <Dot color="primary" />
                <Typography
                  color="text"
                  colorBrightness="secondary"
                  className={classes.legendElementText}
                >
                  SDK
                </Typography>
              </div>
            </div>
            <div className={classes.progressSection}>
              <Typography
                size="md"
                color="text"
                colorBrightness="secondary"
                className={classes.progressSectionTitle}
              >
                Integration
              </Typography>
              <LinearProgress
                variant="determinate"
                value={77}
                classes={{ barColorPrimary: classes.progressBarPrimary }}
                className={classes.progress}
              />
            </div>
            <div>
              <Typography
                size="md"
                color="text"
                colorBrightness="secondary"
                className={classes.progressSectionTitle}
              >
                SDK
              </Typography>
              <LinearProgress
                variant="determinate"
                value={73}
                classes={{ barColorPrimary: classes.progressBarWarning }}
                className={classes.progress}
              />
            </div>
          </Widget>
        </Grid>
        <Grid item lg={3} md={8} sm={6} xs={12}>
          <Widget
            title="Server Overview"
            upperTitle
            className={classes.card}
            bodyClass={classes.fullHeightBody}
          >
            <div className={classes.serverOverviewElement}>
              <Typography
                color="text"
                colorBrightness="secondary"
                className={classes.serverOverviewElementText}
                noWrap
              >
                60% / 37°С / 3.3 Ghz
              </Typography>
              <div className={classes.serverOverviewElementChartWrapper}>
                <ResponsiveContainer height={50} width="99%">
                  <AreaChart data={getRandomData(10)}>
                    <Area
                      type="natural"
                      dataKey="value"
                      stroke={theme.palette.secondary.main}
                      fill={theme.palette.secondary.light}
                      strokeWidth={2}
                      fillOpacity="0.25"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div className={classes.serverOverviewElement}>
              <Typography
                color="text"
                colorBrightness="secondary"
                className={classes.serverOverviewElementText}
                noWrap
              >
                54% / 31°С / 3.3 Ghz
              </Typography>
              <div className={classes.serverOverviewElementChartWrapper}>
                <ResponsiveContainer height={50} width="99%">
                  <AreaChart data={getRandomData(10)}>
                    <Area
                      type="natural"
                      dataKey="value"
                      stroke={theme.palette.primary.main}
                      fill={theme.palette.primary.light}
                      strokeWidth={2}
                      fillOpacity="0.25"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </div>
            <div className={classes.serverOverviewElement}>
              <Typography
                color="text"
                colorBrightness="secondary"
                className={classes.serverOverviewElementText}
                noWrap
              >
                57% / 21°С / 3.3 Ghz
              </Typography>
              <div className={classes.serverOverviewElementChartWrapper}>
                <ResponsiveContainer height={50} width="99%">
                  <AreaChart data={getRandomData(10)}>
                    <Area
                      type="natural"
                      dataKey="value"
                      stroke={theme.palette.warning.main}
                      fill={theme.palette.warning.light}
                      strokeWidth={2}
                      fillOpacity="0.25"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </div>
            </div>
          </Widget>
        </Grid>
        <Grid item lg={3} md={4} sm={6} xs={12}>
          <Widget title="Revenue Breakdown" upperTitle className={classes.card}>
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <ResponsiveContainer width="100%" height={144}>
                  <PieChart>
                    <Pie
                      data={PieChartData}
                      innerRadius={30}
                      outerRadius={40}
                      dataKey="value"
                    >
                      {PieChartData.map((entry, index) => (
                        <Cell
                          key={`cell-${index}`}
                          fill={theme.palette[entry.color].main}
                        />
                      ))}
                    </Pie>
                  </PieChart>
                </ResponsiveContainer>
              </Grid>
              <Grid item xs={6}>
                <div className={classes.pieChartLegendWrapper}>
                  {PieChartData.map(({ name, value, color }, index) => (
                    <div key={color} className={classes.legendItemContainer}>
                      <Dot color={color} />
                      <Typography style={{ whiteSpace: "nowrap", fontSize: 12 }} >
                        &nbsp;{name}&nbsp;
                      </Typography>
                      <Typography color="text" colorBrightness="secondary">
                        &nbsp;{value}
                      </Typography>
                    </div>
                  ))}
                </div>
              </Grid>
            </Grid>
          </Widget>
        </Grid>
        <Grid item xs={12}>
          <Widget
            bodyClass={classes.mainChartBody}
            header={
              <div className={classes.mainChartHeader}>
                <Typography
                  variant="h5"
                  color="text"
                  colorBrightness="secondary"
                >
                  Daily Line Chart
                </Typography>
                <div className={classes.mainChartHeaderLabels}>
                  <div className={classes.mainChartHeaderLabel}>
                    <Dot color="warning" />
                    <Typography className={classes.mainChartLegentElement}>
                      Tablet
                    </Typography>
                  </div>
                  <div className={classes.mainChartHeaderLabel}>
                    <Dot color="primary" />
                    <Typography className={classes.mainChartLegentElement}>
                      Mobile
                    </Typography>
                  </div>
                  <div className={classes.mainChartHeaderLabel}>
                    <Dot color="secondary" />
                    <Typography className={classes.mainChartLegentElement}>
                      Desktop
                    </Typography>
                  </div>
                </div>
                <Select
                  value={mainChartState}
                  onChange={e => setMainChartState(e.target.value)}
                  input={
                    <OutlinedInput
                      labelWidth={0}
                      classes={{
                        notchedOutline: classes.mainChartSelectRoot,
                        input: classes.mainChartSelect,
                      }}
                    />
                  }
                  autoWidth
                >
                  <MenuItem value="daily">Daily</MenuItem>
                  <MenuItem value="weekly">Weekly</MenuItem>
                  <MenuItem value="monthly">Monthly</MenuItem>
                </Select>
              </div>
            }
          >
            <ResponsiveContainer width="100%" minWidth={500} height={350}>
              <ComposedChart
                margin={{ top: 0, right: -15, left: -15, bottom: 0 }}
                data={mainChartData}
              >
                <YAxis
                  ticks={[0, 2500, 5000, 7500]}
                  tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }}
                  stroke={theme.palette.text.hint + "80"}
                  tickLine={false}
                />
                <XAxis
                  tickFormatter={i => i + 1}
                  tick={{ fill: theme.palette.text.hint + "80", fontSize: 14 }}
                  stroke={theme.palette.text.hint + "80"}
                  tickLine={false}
                />
                <Area
                  type="natural"
                  dataKey="desktop"
                  fill={theme.palette.background.light}
                  strokeWidth={0}
                  activeDot={false}
                />
                <Line
                  type="natural"
                  dataKey="mobile"
                  stroke={theme.palette.primary.main}
                  strokeWidth={2}
                  dot={false}
                  activeDot={false}
                />
                <Line
                  type="linear"
                  dataKey="tablet"
                  stroke={theme.palette.warning.main}
                  strokeWidth={2}
                  dot={{
                    stroke: theme.palette.warning.dark,
                    strokeWidth: 2,
                    fill: theme.palette.warning.main,
                  }}
                />
              </ComposedChart>
            </ResponsiveContainer>
          </Widget>
        </Grid>
        {mock.bigStat.map(stat => (
          <Grid item md={4} sm={6} xs={12} key={stat.product}>
            <BigStat {...stat} />
          </Grid>
        ))}
        <Grid item xs={12}>
          <Widget
            title="Support Requests"
            upperTitle
            noBodyPadding
            bodyClass={classes.tableWidget}
          >
            <Table data={mock.table} />
          </Widget>
        </Grid>
      </Grid>
    </>
  );
}