import React from "react";
import API from "../../utils/API";
import {AppBar, Button, Drawer, IconButton, makeStyles, Menu, MenuItem, Toolbar} from "@material-ui/core";
import AddIcon from '@material-ui/icons/Add';
import AccountIcon from '@material-ui/icons/AccountCircle'
// import Dragable from 'react-dra'

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    list: {
        backgroundColor: "grey",
        height: '100%',
        width: 250,
        textAlign: "center",
    },
    text: {
        marginTop: 42,
        textAlign: "center",
        color: 'white',
    },
    button: {
        margin: theme.spacing(1),
        size: "large",
        fontSize: 24,
        marginTop: 42,
    }
}));

const handleMenu = event => {
    this.setAnchorEl(event.currentTarget);
};

const handleClose = () => {
    this.setAnchorEl(null);
};

const toggleDrawer = (side, open) => event => {
    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
        return;
    }
    this.setState({ ...this.state, [side]: open });
};

const disconnect = () => {
    API.logout();
    window.location = "/";
};

const sideList = side => (
    <div
        className={useStyles.list}
        role="presentation"
        onClick={toggleDrawer(side, false)}
        onKeyDown={toggleDrawer(side, false)}
    >
        <Button className={useStyles.button}>Weather</Button>
    </div>
);


export class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        // [(this.state), (this.setState)] = React.useState({
        //     left: false,
        // });
        this.state = {
            left: false,
            open: false,
            widgetList: [],
        };
        // [(this.anchorEl), (this.setAnchorEl)] = React.useState(null);
        this.anchorEl = null;
    }

    render() {
        // const classes = useStyles();
        const open = Boolean(this.anchorEl);
        return (
            <div className="Dashboard">
                <div className={useStyles.root}>
                    <AppBar position="absolute" color="default">
                        <Toolbar>
                            <IconButton edge="start" className={useStyles.menuButton} color="inherit" aria-label="menu" onClick={toggleDrawer('left', true)}>
                                <AddIcon/>
                            </IconButton>
                            <div style={{marginLeft: "auto"}}>
                                <IconButton
                                    edge="end"
                                    position="absolute"
                                    aria-label="account of current user"
                                    aria-controls="menu-appbar"
                                    aria-haspopup="true"
                                    onClick={handleMenu}
                                    color="inherit"
                                >
                                    <AccountIcon/>
                                </IconButton>
                                <Menu
                                    id="menu-appbar"
                                    anchorEl={this.anchorEl}
                                    anchorOrigin={{
                                        vertical: 'top',
                                        horizontal: 'right',
                                    }}
                                    keepMounted
                                    transformOrigin={{
                                        vertical: 'top',
                                        horizontal: 'right',
                                    }}
                                    open={this.open}
                                    onClose={handleClose}
                                >
                                    <MenuItem onClick={handleClose}>Profile</MenuItem>
                                    <MenuItem onClick={disconnect}>Disconnect</MenuItem>
                                </Menu>
                            </div>
                            <Drawer open={this.state.left} onClose={toggleDrawer('left', false)}>
                                {sideList('left')}
                            </Drawer>
                        </Toolbar>
                    </AppBar>
                </div>
                    {/*<ButtonAppBar/>*/}
                <h1>Work in progress</h1>
            </div>
        );
    }
}