import React from 'react';
import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
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 clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';
import Divider from '@material-ui/core/Divider';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import ImageList from './testIL';
import PhotoIcon from '@material-ui/icons/Photo';
import ShareIcon from '@material-ui/icons/Share';
import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
import Grid from '@material-ui/core/Grid';
import DeleteIcon from '@material-ui/icons/Delete';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import SettingsIcon from '@material-ui/icons/Settings';
import Avatar from '@material-ui/core/Avatar';
import Icon from '@material-ui/core/Icon';
import AddCircle from '@material-ui/icons/AddCircle';
import CloudIcon from '@material-ui/icons/Cloud';
import LinearProgress from '@material-ui/core/LinearProgress';
const drawerWidth = 240;

const BorderLinearProgress = withStyles((theme) => ({
    colorPrimary: {
        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
    },
    bar: {
        borderRadius: 5,
        backgroundColor: '#1a90ff',
    },
}))(LinearProgress);

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
    },
    root: {
        display: 'flex',
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    menuButton: {
        marginRight: 36,
    },
    hide: {
        display: 'none',
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap',
    },
    drawerOpen: {
        width: drawerWidth,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    drawerClose: {
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        overflowX: 'hidden',
        width: theme.spacing(7) + 1,
        [theme.breakpoints.up('sm')]: {
            width: theme.spacing(9) + 1,
        },
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
    },
}));

export default function ButtonAppBar() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
    const theme = useTheme();

    const handleDrawerOpen = () => {
        setOpen(true);
    };

    const handleDrawerClose = () => {
        setOpen(false);
    };

    return ( <
        div className = { classes.root } >
        <AppBar position = "fixed"
        style = {
            { background: '#2196f3' }
        }
        className = {
            clsx(classes.appBar, {
                [classes.appBarShift]: open,
            })
        } >
        <
        Toolbar >
        <
        IconButton color = "inherit"
        onClick = { handleDrawerOpen }
        edge = "start"
        className = {
            clsx(classes.menuButton, {
                [classes.hide]: open,
            })
        } >
        <
        MenuIcon / >
        <
        /IconButton>  <
        Typography variant = "h6"
        className = { classes.title } >
        谷狗相薄 </Typography>  <Button
        variant = "contained"
        startIcon = { < CloudUploadIcon / > } >
        Upload </Button><IconButton style={{ color: '#ffffff' }} aria-label="delete"> <
        HelpOutlineIcon / >
        </IconButton> <IconButton style={{ color: '#ffffff' }} aria-label="delete"> <
        SettingsIcon / >
        </IconButton> <Avatar alt="Remy Sharp" src="/static / images / avatar / 1. jpg " /> < /
        Toolbar > </AppBar> 
        <Drawer variant = "permanent"
        className = {
            clsx(classes.drawer, {
                [classes.drawerOpen]: open,
                [classes.drawerClose]: !open,
            })
        }
        classes = {
            {
                paper: clsx({
                    [classes.drawerOpen]: open,
                    [classes.drawerClose]: !open,
                }),
            }
        } >
        <
        div className = { classes.toolbar } >
        <
        IconButton onClick = { handleDrawerClose } > { theme.direction === 'rtl' ? < ChevronRightIcon / > : < ChevronLeftIcon / > } <
        /IconButton> < /
        div > <
        Divider / >
        <
        List > {
            ['相片', '共享', '相簿', '實用工具'].map((text, index) => ( <
                ListItem button key = { text } >
                <
                ListItemIcon > { index == 0 ? < PhotoIcon / > : index == 1 ? < ShareIcon / > : index == 2 ? < PhotoAlbumIcon / > : < LibraryAddCheckIcon / > } < /ListItemIcon> <
                ListItemText primary = { text }
                /> < /
                ListItem >
            ))
        } <
        Divider / > {
            ['儲存空間'].map((text, index) => ( <
                ListItem button key = { text } >
                <
                ListItemIcon > { < CloudIcon / > } < /ListItemIcon> <
                ListItemText primary = { text }
                secondary = <
                BorderLinearProgress variant = "determinate"
                value = { 50 }
                /> / >
                <
                /
                ListItem >
            ))
        } < /
        List > < /
        Drawer > <
        main className = { classes.content } >
        <
        div className = { classes.toolbar }
        /> <
        ImageList / > < /
        main > < /
        div >
    );
}