@material-ui/core/styles#useTheme JavaScript Examples

SearchFabAndDialog = (props) => {
  const { dialogOpen, handleDialogToggle, children } = props;

  const { t } = useTranslation();
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down('md'));
  const style = Style();

  return (
    <Fragment>
      <Fab
        className={style.fab}
        variant={matches ? 'round' : 'extended'}
        color="primary"
        onClick={() => handleDialogToggle()}
      >
        <SearchIcon />
        {!matches && (
          <Typography variant="body1">
            {t('searchFabAndDialog.search')}
          </Typography>
        )}
      </Fab>
      <Dialog
        maxWidth={false}
        open={dialogOpen}
        onClose={() => handleDialogToggle()}
      >
        {children}
      </Dialog>
    </Fragment>
  );
}

InfoModalTemplate = (props) => {
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))

  return (<Dialog
    fullScreen={fullScreen}
    open={props.open}
    onClose={props.handleClose}
    aria-labelledby="responsive-dialog-title"
  >

    <DialogContent>
      {props.children}
    </DialogContent>
    <DialogActions>
      <Button onClick={props.handleClose} color="primary" autoFocus>
        <FormattedMessage id="dialog.close" defaultMessage="Missing String" />
      </Button>
    </DialogActions>
  </Dialog>
  )
}

export default function AppCurrentSubject() {
  const theme = useTheme();

  const chartOptions = merge(BaseOptionChart(), {
    stroke: { width: 2 },
    fill: { opacity: 0.48 },
    legend: { floating: true, horizontalAlign: 'center' },
    xaxis: {
      categories: ['English', 'History', 'Physics', 'Geography', 'Chinese', 'Math'],
      labels: {
        style: {
          colors: [
            theme.palette.text.secondary,
            theme.palette.text.secondary,
            theme.palette.text.secondary,
            theme.palette.text.secondary,
            theme.palette.text.secondary,
            theme.palette.text.secondary
          ]
        }
      }
    }
  });

  return (
    <Card>
      <CardHeader title="Current Subject" />
      <ChartWrapperStyle dir="ltr">
        <ReactApexChart type="radar" series={CHART_DATA} options={chartOptions} height={340} />
      </ChartWrapperStyle>
    </Card>
  );
}

TopPanel = () => {
  const [, dispatch] = useEntryContext();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const classes = useTopPanelStyles();

  return (
    <Paper className={classes.root}>
      <Search />
      <Filter />
      {!isMobile ? (
        <Button
          className={classes.desktopButton}
          component={RouterLink}
          to="/add_update"
          size="large"
          variant="contained"
          color="primary"
          startIcon={<PostAddIcon />}
          onClick={() => dispatch(resetEditValues())}
        >
          Add Entry
        </Button>
      ) : (
        <HideOnScroll>
          <Fab
            className={classes.fab}
            color="primary"
            component={RouterLink}
            to="/add_update"
            onClick={() => dispatch(resetEditValues())}
          >
            <PostAddIcon />
          </Fab>
        </HideOnScroll>
      )}
    </Paper>
  );
}

export default function AutoSuggest({ disabled, handleDelete, handleChange, suggestions, values, placeholder }) {
	const classes = useStyles();
	const theme = useTheme();

	const selectStyles = {
		input: (base) => ({
			...base,
			color: theme.palette.text.primary,
			'& input': {
				font: 'inherit'
			}
		})
	};

	return (
		<div className={classes.root}>
			<NoSsr>
				<Select
					isDisabled={disabled}
					classes={classes}
					styles={selectStyles}
					inputId="react-select-multiple"
					TextFieldProps={{
						InputLabelProps: {
							htmlFor: 'react-select-multiple',
							shrink: true
						}
					}}
					placeholder={placeholder || 'Select...'}
					options={suggestions}
					components={components}
					value={values}
					onChange={handleChange}
					isMulti
				/>
			</NoSsr>
		</div>
	);
}

export default function TagSelector({names, tags, handleChange}){
    const classes = useStyles();
    const theme = useTheme();
    return (
    <FormControl className={classes.formControl}>
    <InputLabel id="demo-mutiple-chip-label" >Tags</InputLabel>
    <Select
        labelId="demo-mutiple-chip-label"
        id="demo-mutiple-chip"
        multiple
        value={tags}
        onChange={handleChange}
        input={<Input id="select-multiple-chip" />}
        renderValue={(selected) => (
        <div className={classes.chips}>
            {selected.map((value) => (
            <Chip key={value} label={value} className={classes.chip} />
            ))}
        </div>
        )}
        MenuProps={MenuProps}
    >
        {names.map((name) => (
        <MenuItem key={name} value={name} style={getStyles(name, tags, theme)}>
            {name}
        </MenuItem>
        ))}
    </Select>
    </FormControl>
    )
}

export default function Appbar({ handleDrawerOpen, open }) {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <AppBar
      position="fixed"
      className={clsx(classes.appBar, {
        [classes.appBarShift]: open,
      })}
    >
      <Toolbar disableGutters>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          onClick={handleDrawerOpen}
          edge="start"
          className={clsx(classes.menuButton, {
            [classes.hide]: open,
          })}
        >
          <MenuIcon />
        </IconButton>
        <H1 noWrap className={classes.toolBarTitle}>
          Missions Control
        </H1>
      </Toolbar>
    </AppBar>
  );
}

export default function RatingsChart() {
  const theme = useTheme()

  const { loading, error, data } = useQuery(GET_DATA_QUERY)
  if (error) return <p>Sign in to view</p>
  if (loading) return <p>Loading</p>

  return (
    <React.Fragment>
      <Title>Average City Property Value</Title>
      <ResponsiveContainer>
        <BarChart
          data={data.cityValues}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="city" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              City
            </Label>
          </YAxis>
          <Bar dataKey="average" fill={theme.palette.primary.main}></Bar>
        </BarChart>
      </ResponsiveContainer>
    </React.Fragment>
  )
}

function Header() {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <AppBar position="fixed" color="inherit" className={classes.appBar}>
      <Toolbar>
        <Link to="/">
          <img
            src={
              theme.darkMode ? '/images/logo-branca.png' : '/images/logo.png'
            }
            alt="logo"
            className={classes.img}
          />
        </Link>
        <div className={classes.grow} />
        <div className={classes.userSection}>
          <WritePost />
          <Box ml={2}>
            <Notifications />
          </Box>
          <Box ml={2}>
            <Settings />
          </Box>
          <Box ml={2}>
            <Account />
          </Box>
        </div>
      </Toolbar>
    </AppBar>
  );
}

export default function DialogForm({
  open,
  onClose,
  onSubmit,
  children,
  ...rest
}) {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'));

  return (
    <Dialog
      open={open}
      PaperProps={{
        component: 'form',
        onSubmit: (e) => {
          e.preventDefault();
          if (onSubmit) {
            onSubmit();
          }
        },
      }}
      onClose={onClose}
      fullScreen={fullScreen}
      {...rest}
    >
      {children}
    </Dialog>
  );
}

function Modal ({open, onClose, content, actions} = {}) {
  const classes = useStyles()
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('xs'))

  return (
    <Dialog fullScreen={fullScreen} fullWidth={true} maxWidth='xs' open={open} onClose={onClose}>
      <Box alignItems='center' display='flex' px={2} height={theme.sav3.topBar.height}>
        <Box flexGrow={1}>
          <IconButton onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Box>
        {fullScreen && <Box px={1}>{actions}</Box>}
      </Box>
      <Divider />
      <DialogContent className={classes.content}>{content}</DialogContent>
      {!fullScreen && (
        <div>
          <Divider />
          <Box alignItems='center' display='flex' px={3} height={theme.sav3.topBar.height}>
            <Box flexGrow={1}></Box>
            <Box>{actions}</Box>
          </Box>
        </div>
      )}
    </Dialog>
  )
}

SideNav = () => {
  const theme = useTheme();
  const isMaxScreenSm = useMediaQuery(theme.breakpoints.down("sm"));

  const isDrawerOpen = useSelector(({ layout }) => layout.isDrawerOpen);
  const isAuth = useSelector(({ channel }) => channel.isAuth);
  let isOpen;
  if (isMaxScreenSm) isOpen = isDrawerOpen;
  else isOpen = true; //We will control open by css
  const classes = useStyles();
  return (
    <Drawer
      variant={isMaxScreenSm ? "temporary" : "persistent"}
      open={isOpen}
      className={clsx(classes.drawer, {
        [classes.drawerOpen]: isDrawerOpen,
        [classes.drawerClose]: !isDrawerOpen,
      })}
      classes={{
        paper: clsx({
          [classes.drawerOpen]: isDrawerOpen,
          [classes.drawerClose]: !isDrawerOpen,
        }),
      }}
    >
      <div className={classes.navHead}>
        <StartNav mobile />
      </div>
      <Divider />
      <MainNavMenu />
      <Divider />
      {isDrawerOpen && !isAuth && <SideCategoryMenu />}
    </Drawer>
  );
}

function Search() {
  const theme = useTheme()
  const amp = useAmp()
  const isDesktop = useMediaQuery(theme.breakpoints.up('sm')) && !amp

  return (
    <>
      {!isDesktop && <SearchMobile />}
      <Spacer />
      {isDesktop && <SearchDesktop />}
    </>
  )
}

Header = ({isAuthenticated, logout}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <>
      { isMobile
        ? <MobileHeader isAuthenticated={isAuthenticated} logout={logout} />
        : <DesktopHeader isAuthenticated={isAuthenticated} logout={logout} />
      }
    </>
  )
}

function Summary({ fileInfo, resultSummary }) {
    const theme = useTheme();
    const [chartReady, setChartReady] = useState(false);
    const chartData = useMemo(() => buildChartData(resultSummary), [resultSummary]);
    const chartOptions = useMemo(() => getChartOptions(theme), [theme]);
    const chartEvents = useMemo(() => [{ eventName: 'ready', callback: () => setChartReady(true) }], [setChartReady]);
    const compliancePercent = useMemo(() => calculateCompliance(resultSummary), [resultSummary]);
    return (
        <Paper className="summary">
            <h2>{fileInfo.name}</h2>
            <section className="summary__chart">
                <Chart
                    chartType="PieChart"
                    loader={<CircularProgress />}
                    data={chartData}
                    options={chartOptions}
                    chartEvents={chartEvents}
                />
                <div className={classNames('summary__compliance', { summary__compliance_hidden: !chartReady })}>
                    <span>{compliancePercent}%</span>
                    compliant
                </div>
            </section>
            <ul className="legend">
                <LegendItem value={resultSummary.passedChecks} label="checks passed" type="passed" />
                <LegendItem value={resultSummary.failedChecks} label="errors" type="failed" />
            </ul>
        </Paper>
    );
}

USInfoTopWidget = (props) => {
    const classes = useStyles();
    const theme = useTheme();
    const squish = useMediaQuery(theme.breakpoints.down('xs'));

    const tags = [];
    let cursor = props.source;
    while (cursor) {
        tags.push(cursor);
        cursor = cursor.parent();
    }

    const showBeds = tags.length < 4 && !squish;

    return <div className={classes.tagSticky} >
        <div className={`${classes.tagContainer} ${showBeds ? '' : classes.tagContainerNoBeds}`}>
            {tags.map(source =>
                <Tag
                    key={source.routeTo()}
                    source={source}
                    squish={squish}
                    showBeds={showBeds}
                />
            )}
        </div>
    </div>;
}

WelcomeNavigationBar = () => {
  const { t } = useTranslation();
  const history = useHistory();
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down('xs'));
  const style = Style();

  return (
    <AppBar
      position="static"
      color={theme.palette.type === 'dark' ? 'inherit' : 'primary'}
    >
      <Toolbar>
        <Link
          edge="start"
          variant="h4"
          color="inherit"
          underline="none"
          href="/"
        >
          Tisn
        </Link>
        <div className={style.grow} />
        <Button
          edge="end"
          className={style.buttons}
          size={matches ? 'small' : 'medium'}
          variant="outlined"
          color="inherit"
          onClick={() => history.push('/log-in')}
        >
          {t('welcomeNavigationBar.logIn')}
        </Button>
        <Button
          edge="end"
          className={style.buttons}
          size={matches ? 'small' : 'medium'}
          variant="contained"
          color={theme.palette.type === 'dark' ? 'default' : 'inherit'}
          style={{
            color: theme.palette.type === 'light' && theme.palette.primary.main,
          }}
          onClick={() => history.push('/sign-up')}
        >
          {t('welcomeNavigationBar.signUp')}
        </Button>
      </Toolbar>
    </AppBar>
  );
}

CalendarRow = ({ id, title, startTime, eventNum, status }) => {
  const activeEvent = useSelector((state) => state.activeEvent);
  const dispatch = useDispatch();
  const history = useHistory();
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.down("sm"));

  const timeObject = parseTime(startTime, null);

  return (
    <div
      className={`calendar-row ${
        parseInt(eventNum) % 2 === 0 && "calendar-row-even"
      } ${activeEvent === id && "calendar-row-active"}`}
      onClick={
        matches
          ? () => {
              history.push(`/events/${id}`);
              history.go();
            }
          : () => {
              dispatch(makeActive(id));
            }
      }
    >
      <div style={{ width: "15%" }}>
        <Typography color="textSecondary">{timeObject.weekday}</Typography>
        <Typography variant="h4">{timeObject.day}</Typography>
      </div>
      <div
        style={{
          borderLeft: "1px solid rgba(0,0,0,.1)",
          paddingLeft: "20px",
          width: "65%",
        }}
      >
        <Typography color="textSecondary">{title}</Typography>
        <div>
          <Typography
            variant="caption"
            component="span"
            style={
              status === "Not Going"
                ? { color: "rgba(232, 64, 64, .75)" }
                : status === "Maybe"
                ? { color: "rgba(255, 169, 40, .75)" }
                : status === "Going"
                ? { color: "rgba(33, 186, 66, .75)" }
                : { color: "rgba(0,0,0, .3)" }
            }
          >
            {status || "undecided"}
          </Typography>
        </div>
      </div>
      <Typography variant="caption" color="textSecondary">
        {timeObject.startTime}
      </Typography>
    </div>
  );
}

function ScheduleCard({ Anime }) {
  const theme = useTheme();
  const classes = useStyles();

  const two_cards = useMediaQuery(theme.breakpoints.down("xs"));
  const three_cards = useMediaQuery(theme.breakpoints.down("sm"));
  const four_cards = useMediaQuery(theme.breakpoints.down("md"));

  let temp_col;
  if (two_cards) {
    temp_col = 2;
  } else if (three_cards) {
    temp_col = 3;
  } else if (four_cards) {
    temp_col = 4;
  } else {
    temp_col = 6;
  }

  return (
    <div className="root">
      <ImageList className={classes.imageList} cols={temp_col}>
        {Anime.map((item) => (
          <ImageListItem
            key={item.img}
            style={{ height: 300, padding: "12px" }}
          >
            <img src={item.img} alt={item.name} />
            <ImageListItemBar
              title={item.title}
              subtitle={`Airing: ${new Date(
                item.airing_time
              ).toLocaleTimeString()}`}
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={<Button>{`Ep ${item.episode}`}</Button>}
            />
          </ImageListItem>
        ))}
      </ImageList>
    </div>
  );
}

AuthFormModal = ({ closeMobileMenu, type }) => {
  const classes = useDialogStyles();
  const classesBtn = useNavStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

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

  const handleMobileMenu = () => {
    handleClickOpen();
    closeMobileMenu();
  };

  return (
    <div>
      {type === 'upvote' ? (
        <IconButton
          onClick={handleClickOpen}
          fontSize={isMobile ? 'small' : 'medium'}
        >
          <ArrowUpwardIcon style={{ color: '#b2b2b2' }} />
        </IconButton>
      ) : type === 'downvote' ? (
        <IconButton
          onClick={handleClickOpen}
          fontSize={isMobile ? 'small' : 'medium'}
        >
          <ArrowDownwardIcon style={{ color: '#b2b2b2' }} />
        </IconButton>
      ) : isMobile ? (
        <MenuItem onClick={handleMobileMenu}>
          <ListItemIcon>
            <ExitToAppIcon style={{ marginRight: 7 }} />
            Login/Register
          </ListItemIcon>
        </MenuItem>
      ) : (
        <Button
          color="primary"
          onClick={handleClickOpen}
          className={classesBtn.navButtons}
        >
          Login/Register
        </Button>
      )}
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="md"
        classes={{ paper: classes.dialogWrapper }}
      >
        <DialogTitle onClose={handleClose}></DialogTitle>
        <DialogContent>
          <AuthForm />
        </DialogContent>
      </Dialog>
    </div>
  );
}

DesktopNavMenu = () => {
  const { pathname } = useLocation();
  const classes = useMenuStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));

  if (isMobile) return null;

  return (
    <Grid item>
      <div className={classes.rootPanel}>
        <div className={classes.list}>
          <MenuItem
            selected={
              pathname === '/' ||
              (!pathname.startsWith('/tag') && !pathname.startsWith('/user'))
            }
            component={RouterLink}
            to="/"
          >
            <PublicIcon className={classes.menuIcon} />
            Stack Underflow
          </MenuItem>
          <MenuItem
            selected={pathname.startsWith('/tag')}
            component={RouterLink}
            to="/tags"
          >
            <LocalOfferIcon className={classes.menuIcon} />
            Tags
          </MenuItem>
          <MenuItem
            selected={pathname.startsWith('/user')}
            component={RouterLink}
            to="/users"
          >
            <PeopleIcon className={classes.menuIcon} />
            Users
          </MenuItem>
        </div>
        <Divider orientation="vertical" flexItem />
      </div>
    </Grid>
  );
}

Search = () => {
  const query = useRef();
  const classes = useSearchStyles();
  const [, dispatch] = useEntryContext();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));

  const handleSearchChange = () => {
    if (query.current.value !== '') {
      dispatch(setSearchInput(query.current.value));
    } else {
      dispatch(clearSearch());
    }
  };

  const handleClear = () => {
    query.current.value = '';
    dispatch(clearSearch());
  };

  const clearButton = () => {
    if (isMobile) {
      return (
        <IconButton color="secondary" onClick={handleClear} size="small">
          <HighlightOffIcon />
        </IconButton>
      );
    }

    return (
      <Button
        color="primary"
        onClick={handleClear}
        startIcon={<HighlightOffIcon />}
      >
        Clear
      </Button>
    );
  };

  return (
    <div className={classes.root}>
      <TextField
        className={classes.field}
        fullWidth
        label="Search"
        variant="outlined"
        placeholder="By title, tag or description"
        inputRef={query}
        onChange={handleSearchChange}
        color="secondary"
        size={isMobile ? 'small' : 'medium'}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <SearchIcon color="secondary" />
            </InputAdornment>
          ),
          endAdornment: (
            <InputAdornment position="end">
              {query?.current?.value !== '' && clearButton()}
            </InputAdornment>
          ),
        }}
      />
    </div>
  );
}

Chart = () => {
	const theme = useTheme();

	const date = useRef(new Date().toISOString());
	const { tickets } = useTickets({ date: date.current });

	const [chartData, setChartData] = useState([
		{ time: "08:00", amount: 0 },
		{ time: "09:00", amount: 0 },
		{ time: "10:00", amount: 0 },
		{ time: "11:00", amount: 0 },
		{ time: "12:00", amount: 0 },
		{ time: "13:00", amount: 0 },
		{ time: "14:00", amount: 0 },
		{ time: "15:00", amount: 0 },
		{ time: "16:00", amount: 0 },
		{ time: "17:00", amount: 0 },
		{ time: "18:00", amount: 0 },
		{ time: "19:00", amount: 0 },
	]);

	useEffect(() => {
		setChartData(prevState => {
			let aux = [...prevState];

			aux.forEach(a => {
				tickets.forEach(ticket => {
					format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") === a.time &&
						a.amount++;
				});
			});

			return aux;
		});
	}, [tickets]);

	return (
		<React.Fragment>
			<Title>{`${i18n.t("dashboard.charts.perDay.title")}${
				tickets.length
			}`}</Title>
			<ResponsiveContainer>
				<BarChart
					data={chartData}
					barSize={40}
					width={730}
					height={250}
					margin={{
						top: 16,
						right: 16,
						bottom: 0,
						left: 24,
					}}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
					<YAxis
						type="number"
						allowDecimals={false}
						stroke={theme.palette.text.secondary}
					>
						<Label
							angle={270}
							position="left"
							style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
						>
							Tickets
						</Label>
					</YAxis>
					<Bar dataKey="amount" fill={theme.palette.primary.main} />
				</BarChart>
			</ResponsiveContainer>
		</React.Fragment>
	);
}

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}>
      <Chatbot/>
      <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>
  )
}

// Renders the menu, responsive
function MenuUntranslated (props) {
  const {
    handleDrawerOpen,
    handleDrawerClose,
    open,
    newServiceWorkerDetected,
    onLoadNewServiceWorkerAccept,
    t
  } = props
  const classes = useStyles()
  const theme = useTheme()
  const isBig = useMediaQuery(theme.breakpoints.up('md'))
  const DrawerComponent = isBig ? Drawer : SwipeableDrawer
  const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent)

  const toggleDrawer = (openState) => (/* event */) => {
    if (openState) {
      handleDrawerOpen()
    } else {
      handleDrawerClose()
    }
  }

  const handleClickUpdate = (e) => {
    e.preventDefault()
    handleDrawerClose()
    onLoadNewServiceWorkerAccept()
  }

  return (
    <DrawerComponent
      {...(isBig
        ? {
            variant: 'permanent'
          }
        : {
            anchor: 'left',
            onClose: toggleDrawer(false),
            onOpen: toggleDrawer(true),
            disableBackdropTransition: !iOS,
            disableDiscovery: iOS
          })}
      classes={{
        paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose)
      }}
      open={open}
    >
      <MenuContent handleDrawerClose={handleDrawerClose} />
      {newServiceWorkerDetected
        ? (
          <ListItem
            button
            onClick={handleClickUpdate}
            className={classes.updateItem}
          >
            <Tooltip title={t('Update!')}>
              <ListItemIcon>
                <FontAwesomeIcon
                  icon={faUpgrade}
                  style={{ fontSize: '1.5rem', color: 'green' }}
                />
              </ListItemIcon>
            </Tooltip>
            <ListItemText primary={t('Update!')} />
          </ListItem>
          )
        : null}
    </DrawerComponent>
  )
}

MapModal = ({ isDesktop }) => {
  const { t } = useTranslation('translations')
  const classes = useStyles()
  const [open, setOpen] = useState(false)
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))
  const [maxWidth] = useState('md')

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <>
      {isDesktop && (
        <Button
          onClick={handleClickOpen}
          className={classes.buttonMapDesktop}
          startIcon={<RoomIcon />}
        >
          {t('map.browseWithAmap')}
        </Button>
      )}
      {!isDesktop && (
        <IconButton onClick={handleClickOpen}>
          <RoomIcon className={classes.iconBottomAppBar} />
        </IconButton>
      )}
      <Dialog
        fullScreen={fullScreen}
        maxWidth={maxWidth}
        className={classes.dialog}
        open={open}
        onClose={handleClose}
        aria-labelledby="responsive-dialog-title"
      >
        <Box className={classes.closeIcon}>
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={handleClose}
          >
            <CloseIcon fontSize="inherit" />
          </IconButton>
        </Box>
        <DialogTitle id="responsive-dialog-title" className={classes.title}>
          {t('map.findLifebank')}
        </DialogTitle>
        <MapShowLocations className={classes.map} />
      </Dialog>
    </>
  )
}

FeatureDialog = () => {
  const classes = useStyles();
  const { open, setOpen, features } = useContext(DialogContext);
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const { title, subtitle, features: jouhou } = features;

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

  return (
    <div>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        onClose={handleClose}
        aria-labelledby="responsive-dialog-title"
      >
        <DialogTitle className={classes.dialogTitle}>
          {title}
          <IconButton aria-label="close" className={classes.closeButton} onClick={handleClose}>
            <CloseIcon />
          </IconButton>
        </DialogTitle>
        <DialogContent dividers>
          <DialogContentText>
            <Typography variant="caption">{subtitle}</Typography>
          </DialogContentText>
          <Typography variant="body1">目前可公開情報..</Typography>
          <List>
            {jouhou.map((str, index) => (
              <Fragment key={index}>
                <ListItem>
                  <ListItemText primary={`${index + 1}. ${str}`} />
                </ListItem>
                <Divider />
              </Fragment>
            ))}
          </List>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            關閉
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default function Dashboard() {
  const theme = useTheme()

  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
    },
    paper: {
      padding: theme.spacing(2),
      display: 'flex',
      overflow: 'auto',
      flexDirection: 'column',
    },
    fixedHeight: {
      height: 240,
    },
  }))
  const classes = useStyles(theme)
  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)

  return (
    <React.Fragment>
      <Grid container spacing={4}>
        {/* Ratings Chart */}
        <Grid item xs={12} md={8} lg={7}>
          <Paper className={fixedHeightPaper}>
            <RatingsChart />
          </Paper>
        </Grid>
        {/* User Count */}
        <Grid item xs={12} md={4} lg={5}>
          <Paper className={fixedHeightPaper}>
            <UserCount />
          </Paper>
        </Grid>
        {/* Recent Reviews */}
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <RecentReviews />
          </Paper>
        </Grid>
      </Grid>
    </React.Fragment>
  )
}

function FilterPanel(props) {
    const { filters, setFilters, closeButton, clearButton, isMobile } = props;
    const { t } = useTranslation("main");

    const classes = useStyles();
    const theme = useTheme();
    const mdSize = useMediaQuery(theme.breakpoints.up("md"));

    return (
        <Grid
            container={true}
            className={`${classes.panel} ${mdSize ? classes.mdPanel : ""}`}
        >
            {isMobile && (
                <Typography variant="h6" component="span">
                    {t("filter.heading")}
                </Typography>
            )}
            <form onSubmit={(e) => e.preventDefault()}>
                <FilterSegment>
                    <AvailabilityFilter
                        onlyShowAvailable={filters.filterByAvailable}
                        onChange={(value) =>
                            setFilters({
                                ...filters,
                                filterByAvailable: value,
                            })
                        }
                    />
                </FilterSegment>
                <FilterGroup name={t("filter.find_locations")}>
                    <FilterSegment>
                        <ZipCodeFilter
                            zipCode={filters.filterByZipCode.zipCode}
                            onChange={(zip) =>
                                setFilters({
                                    ...filters,
                                    filterByZipCode: {
                                        ...filters.filterByZipCode,
                                        zipCode: zip,
                                    },
                                })
                            }
                        />
                    </FilterSegment>
                    <FilterSegment>
                        <RadiusFilter
                            value={filters.filterByZipCode.miles}
                            onChange={(miles) =>
                                setFilters({
                                    ...filters,
                                    filterByZipCode: {
                                        ...filters.filterByZipCode,
                                        miles,
                                    },
                                })
                            }
                        />
                    </FilterSegment>
                </FilterGroup>
                <FilterSegment>
                    {closeButton} {clearButton}
                </FilterSegment>
            </form>
        </Grid>
    );
}