import * as React from "react";

import { Link } from "react-router-dom";

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button";
import SwipeableDrawer from "@material-ui/core/SwipeableDrawer";
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 Divider from "@material-ui/core/Divider";
import Avatar from "@material-ui/core/Avatar";
import MenuIcon from "@material-ui/icons/Menu";
import SettingsIcon from "@material-ui/icons/Settings";
import PersonIcon from "@material-ui/icons/Person";
import InfoIcon from "@material-ui/icons/Info";
import HomeIcon from "@material-ui/icons/Home";
import BookIcon from "@material-ui/icons/Book";
import ViewWeekIcon from "@material-ui/icons/ViewWeek";

import { IUser } from "../models/user";

interface IProps {
    logout: () => void;

    user: IUser;
    open: boolean;
    showButton: boolean;
    authenticated: boolean;
    setDrawer: (state: boolean) => void;
};

export default class Drawer extends React.Component<IProps> {
    openDrawer = () => {
        this.props.setDrawer(true);
    }
    closeDrawer = () => {
        this.props.setDrawer(false);
    }

    render() {
        return (
            <div>
                <AppBar position="static">
                    <Toolbar>
                        {
                            (this.props.authenticated && this.props.showButton) ? (
                                <IconButton
                                    color="inherit"
                                    onClick={this.openDrawer}>
                                    <MenuIcon />
                                </IconButton>
                            ) : undefined
                        }
                        <Typography className="flex" variant="title" color="inherit">
                            Lateinicus
                        </Typography>
                        {
                            this.props.authenticated ? (
                                <Button color="inherit">
                                    {`${this.props.user.score} / 200`}
                                </Button>
                            ) : undefined
                        }
                    </Toolbar>
                </AppBar>
                <SwipeableDrawer
                    anchor="left"
                    open={this.props.open}
                    onClose={this.closeDrawer}
                    onOpen={this.openDrawer}>
                    <List component="nav">
                        <ListItem>
                            <Avatar alt="{Username}" style={{ width: 80, height: 80 }} src="https://avatarfiles.alphacoders.com/105/105250.jpg" />
                            <ListItemText primary={"{{ PLACEHOLDER }}"} />
                        </ListItem>

                        <Divider />

                        <ListItem button>
                            <ListItemIcon>
                                <PersonIcon />
                            </ListItemIcon>
                            <ListItemText primary="Profil" />
                        </ListItem>
                        <ListItem button>
                            <ListItemIcon>
                                <SettingsIcon />
                            </ListItemIcon>
                            <ListItemText primary="Einstellungen" />
                        </ListItem>

                        <Divider />

                        <ListItem
                            component={Link}
                            to="/dashboard"
                            onClick={this.closeDrawer}
                            button>
                            <ListItemIcon>
                                <HomeIcon />
                            </ListItemIcon>
                            <ListItemText primary="Dashboard" />
                        </ListItem>
                        <ListItem
                            component={Link}
                            to="/review/queue"
                            onClick={this.closeDrawer}
                            button>
                            <ListItemIcon>
                                <BookIcon />
                            </ListItemIcon>
                            <ListItemText>
                                Vokabeln üben
                            </ListItemText>
                        </ListItem>
                        <ListItem
                            component={Link}
                            to="/levelList"
                            onClick={this.closeDrawer}
                            button>
                            <ListItemIcon>
                                <ViewWeekIcon />
                            </ListItemIcon>
                            <ListItemText>
                                Levelübersicht
                            </ListItemText>
                        </ListItem>

                        <Divider />

                        <ListItem button onClick={() => {
                            this.closeDrawer();
                            this.props.logout();
                        }}>
                            <ListItemText>
                                Abmelden
                            </ListItemText>
                        </ListItem>

                        <Divider />

                        <ListItem button onClick={() => window.location = "https://gitlab.com/Polynomdivision/Lateinicus/tree/master"}>
                            <ListItemIcon>
                                <InfoIcon />
                            </ListItemIcon>
                            <ListItemText primary="Über" />
                        </ListItem>
                    </List>
                </SwipeableDrawer>
            </div>
        );
    }
};
