import ReactDom from 'react-dom';
import React, { useState } from 'react';
import Drawer from '@material-ui/core/Drawer';
import { Button, Divider, IconButton, List, ListItem } from '@material-ui/core';
import { makeStyles, Theme, useTheme } from '@material-ui/core/styles';
import {ChevronLeft, ChevronRight} from '@material-ui/icons';

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        display: 'flex'
    },
    appBar: {
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen
        })
    },
    appBarShift: {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: drawerWidth,
        transition: theme.transitions.create(['margin', 'width'], {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0,
    },
    drawerPaper: {
        width: drawerWidth,
    },
    drawerHeader: {
        display: 'flex',
        alignItems: 'center',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
        justifyContent: 'flex-end',
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        marginLeft: -drawerWidth,
    },
    contentShift: {
        transition: theme.transitions.create('margin', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.enteringScreen,
        }),
        marginLeft: 0,
    },
}));

export const Headline = () => {
    const [v, setv] = useState(false);
    const classes = useStyles();
    const theme = useTheme();

    return (<div className={classes.root}>
        <Drawer variant='persistent' anchor='left' open={v} className={classes.drawer} classes={{paper:classes.drawerPaper}}>
            <div className={classes.drawerHeader}>
                <IconButton onClick={()=>setv(false)}>
                    {theme.direction === "ltr" ? <ChevronLeft /> : <ChevronRight />}
                </IconButton>
            </div>
            <Divider />
            <List>
                <ListItem>

                    <div>NO</div>
                </ListItem>
            </List>
        </Drawer>
        <main className={([classes.content, v ? classes.contentShift: ""].join(" ").trim())}>
            <h1>aaa{`a${v} ${classes.content}`}aaa</h1>
            <Button onClick={() => setv(!v)}>open</Button>
        </main>
    </div>);
};

export default Headline;