import React from 'react';
import { Link as RouteLink } from 'react-router-dom';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import EntityIcon from '@material-ui/icons/List';
import appConstants from '../../appConstants';

const drawerWidth = 240;

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        alignItems: 'flex-start',
        backgroundColor: '#cfd8dc'
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0
    },
    drawerPaper: {
        width: drawerWidth,
        backgroundColor: '#263238',
        color: '#cfd8dc',
        boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3)
    },
    toolbar: { ...theme.mixins.toolbar, display: 'flex', justifyContent: 'center', alignItems: 'center' }
}));

const AuthLayout = ({ children, match }) => {
    console.log("TCL: AuthLayout -> match", match)
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <CssBaseline />
            <Drawer
                className={classes.drawer}
                variant="permanent"
                classes={{
                    paper: classes.drawerPaper
                }}>
                <div className={classes.toolbar}>
                    <RouteLink to="/">
                        <Typography variant="h5" component="h1">
                            {appConstants.title}
                        </Typography>
                    </RouteLink>
                </div>
                <List>
                    {appConstants.entities.map((entity) => (
                        <RouteLink to={`/${entity.id}`} key={entity.id}>
                            <ListItem
                                css={{
                                    backgroundColor:
                                        match.url.split('/')[1] === entity.id ? '#455a64' : 'inherit'
                                }}
                                button>
                                <ListItemIcon>
                                    <EntityIcon css={{ color: '#cfd8dc' }} />
                                </ListItemIcon>
                                <ListItemText primary={entity.name} />
                            </ListItem>
                        </RouteLink>
                    ))}
                </List>
                <Divider css={{ backgroundColor: '#455a64', padding: '0 8px' }} />
                <List>
                    {appConstants.customActions.map((action, index) => (
                        <RouteLink to={`/c/${action.id}`} key={action.id}>
                            <ListItem
                                button
                                css={{
                                    backgroundColor: match.url.split('/')[2] === action.id ? '#455a64' : 'inherit'
                                }}>
                                <ListItemIcon>
                                    <EntityIcon css={{ color: '#cfd8dc' }} />
                                </ListItemIcon>
                                <ListItemText primary={action.name} />
                            </ListItem>
                        </RouteLink>
                    ))}
                </List>
            </Drawer>
            <main className={classes.content}>{children}</main>
        </div>
    );
};

export default AuthLayout;