import { Component } from 'react';
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';

import { List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';

import TuneIcon from '@material-ui/icons/Tune';
import DashboardIcon from '@material-ui/icons/Dashboard';

import {
  withAuthenticatedContext,
  AuthenticatedContextProps
} from '../authentication';

type ProjectProps = AuthenticatedContextProps & RouteComponentProps;

class ProjectMenu extends Component<ProjectProps> {
  render() {
    const { authenticatedContext } = this.props;
    const path = this.props.match.url;
    return (
      <List>
        <ListItem
          to="/ems-esp/"
          selected={
            path.startsWith('/ems-esp/status') ||
            path.startsWith('/ems-esp/data') ||
            path.startsWith('/ems-esp/help')
          }
          button
          component={Link}
        >
          <ListItemIcon>
            <DashboardIcon />
          </ListItemIcon>
          <ListItemText primary="Dashboard" />
        </ListItem>
        <ListItem
          to="/ems-esp/settings"
          selected={path.startsWith('/ems-esp/settings')}
          button
          component={Link}
          disabled={!authenticatedContext.me.admin}
        >
          <ListItemIcon>
            <TuneIcon />
          </ListItemIcon>
          <ListItemText primary="Settings" />
        </ListItem>
      </List>
    );
  }
}

export default withRouter(withAuthenticatedContext(ProjectMenu));