import * as React from 'react';

import { MainListItems, SecondaryListItems} from './listItems'
import { List, Divider } from '@mui/material';
import { Logout } from '@mui/icons-material/';
import { Nav } from 'react-bootstrap';
import { 
    ListItem, ListItemIcon,ListItemText,
    SwipeableDrawer
} from '@mui/material/'
import useAuth from '../../Auth/useAuth'

export function MenuMovil(props) {

    let { anchor, control } = props;
    const auth = useAuth();

    return (
        <React.Fragment >
            <SwipeableDrawer 
                disableBackdropTransition={true}
                anchor="left" 
                open={anchor} 
                onOpen={() => control(true)}
                onClose={() => control(false)}
                sx={{
                    '& .MuiDrawer-paper': {
                        width : '67%'
                    }
                }}>
                <List style={{ paddingTop : 64 }}>
                    <MainListItems AppBarVisible={anchor} setAppBarVisible={() => console.log('cerrar la vision')} />
                </List>
                <Divider />
                <List>
                    {SecondaryListItems}
                </List>
                <Divider />
                <List>
                    <Nav onClick ={auth.logout}>
                        <ListItem>
                            <ListItemIcon>
                                <Logout/>
                            </ListItemIcon>
                            <ListItemText>
                                Cerrar sesion
                            </ListItemText>
                        </ListItem>
                    </Nav>
                </List>
            </SwipeableDrawer>
        </React.Fragment>
    );
}
