import React from 'react';
import Search from './Search';
import Filter from './Filter';
import { Link as RouterLink } from 'react-router-dom';
import { useEntryContext } from '../context/entry/entryState';
import { resetEditValues } from '../context/entry/entryReducer';

import { Paper, Button, Fab, useMediaQuery } from '@material-ui/core';
import { useTopPanelStyles } from '../styles/muiStyles';
import { useTheme } from '@material-ui/core/styles';
import HideOnScroll from './HideOnScroll';
import PostAddIcon from '@material-ui/icons/PostAdd';

const 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 TopPanel;