import React from 'react';
import { useDispatch } from 'react-redux';
import { Link, useHistory } from 'react-router-dom';
import {
  makeStyles, Paper, Toolbar, IconButton, useMediaQuery, useTheme,
} from '@material-ui/core';

import ReplayIcon from '@material-ui/icons/Replay';
import DescriptionIcon from '@material-ui/icons/Description';
import ShuffleIcon from '@material-ui/icons/Shuffle';
import MapIcon from '@material-ui/icons/Map';
import LogoutIcon from '@material-ui/icons/ExitToApp';

import { sessionActions } from '../store';
import t from '../common/localization';

const useStyles = makeStyles((theme) => ({
  container: {
    bottom: theme.spacing(0),
    left: '0px',
    width: '100%',
    position: 'fixed',
    zIndex: 1301,
    [theme.breakpoints.up('lg')]: {
      left: theme.spacing(1.5),
      bottom: theme.spacing(1.5),
      width: theme.dimensions.drawerWidthDesktop,
    },
  },
  toolbar: {
    padding: theme.spacing(0, 2),
    display: 'flex',
    justifyContent: 'space-around',
    maxWidth: theme.dimensions.bottomNavMaxWidth,
    margin: 'auto',
  },
  navItem: {
    display: 'flex',
    flexDirection: 'column',
    fontSize: '0.75rem',
    fontWeight: 'normal',
  },
}));

const BottomNav = ({ showOnDesktop }) => {
  const classes = useStyles();
  const theme = useTheme();
  const history = useHistory();

  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
  const dispatch = useDispatch();

  const NavLink = ({ children, location }) => (
    <IconButton component={Link} classes={{ label: classes.navItem }} to={location}>
      {children}
    </IconButton>
  );

  const handleLogout = async () => {
    const response = await fetch('/api/session', { method: 'DELETE' });
    if (response.ok) {
      dispatch(sessionActions.updateUser(null));
      history.push('/login');
    }
  };

  if (isDesktop && !showOnDesktop) return null;

  return (
    <div className={classes.container}>
      <Paper square elevation={3}>
        <Toolbar className={classes.toolbar} disableGutters>

          {isDesktop ? (
            <NavLink location="/replay">
              <ReplayIcon />
              {t('reportReplay')}
            </NavLink>
          ) : (
            <NavLink location="/">
              <MapIcon />
              {t('mapTitle')}
            </NavLink>
          )}

          <NavLink location="/reports/route">
            <DescriptionIcon />
            {t('reportTitle')}
          </NavLink>

          <NavLink location="/settings/notifications">
            <ShuffleIcon />
            {t('settingsTitle')}
          </NavLink>

          <IconButton classes={{ label: classes.navItem }} onClick={handleLogout}>
            <LogoutIcon />
            {t('loginLogout')}
          </IconButton>
        </Toolbar>
      </Paper>
    </div>
  );
};

export default BottomNav;