import React from 'react';
import './App.css';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import MapIcon from '@material-ui/icons/Map';
import HomeIcon from '@material-ui/icons/Home';
import InfoIcon from '@material-ui/icons/Info';
import ReportIcon from '@material-ui/icons/Report';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import logo from './logo.png';
import {
    Route,
    NavLink,
    HashRouter
} from "react-router-dom";
import Main from "./Main";

import Report from "./Report";

import About from "./About";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {drawerIsOpen: false};
    }

    handleDrawerOpen = () => {
        this.setState({drawerIsOpen: (this.state.drawerIsOpen ? false : true)});
    };

    handleDrawerClose = () => {
        this.setState({drawerIsOpen: false});
    };

    render() {
        return (
            <div id="body">
                <div id="header">
                    <AppBar position="static" id="header">
                        <Toolbar className="navBarContents">
                            <Typography variant="title" color="inherit">
                                <img src={logo} id="logoImage"/>
                            </Typography>
                            <IconButton onClick={this.handleDrawerOpen} color="inherit" aria-label="Menu"
                                        className={"menuButton"}>
                                <MenuIcon/>
                            </IconButton>
                        </Toolbar>
                    </AppBar>
                </div>
                <HashRouter>
                    <ClickAwayListener onClickAway={this.handleDrawerClose}>
                    <Drawer
                        variant="persistent"
                        open={this.state.drawerIsOpen}
                    >
                        <div>
                            <Button onClick={this.handleDrawerClose} className={"closeButton"}>
                                <p><b>Close</b></p>
                            </Button>
                        </div>
                        <div className="drawerItems">
                            <List>
                                {['Home', 'Map', 'Report Suspicion', 'About'].map((text, index) => (
                                    <NavLink className={"drawerText"} to={index === 0 ? "/" : index === 1 ? "/" : index === 2 ? "/report" : index === 3 ? "/about" : "/"}>
                                        <ListItem button key={text}  >
                                            <ListItemIcon>{index === 0 ? <HomeIcon/> : index === 1 ? <MapIcon/> : index === 2 ? <ReportIcon/> : <InfoIcon/>}</ListItemIcon>
                                            <ListItemText primary={text}/>
                                        </ListItem>
                                    </NavLink>
                                ))}
                            </List>
                        </div>
                    </Drawer>
                    </ClickAwayListener>
                    <div className={"content"}>
                        <Route exact path="/" component={Main}/>
                        <Route path="/report" component={Report}/>
                        <Route path="/about" component={About}/>
                    </div>
                </HashRouter>
            </div>
        );
    }
}

export default App;