import React, {useContext, useState} from 'react'
import { Store } from '../Store';
import Drawer from '@material-ui/core/Drawer';
import styled from 'styled-components'
import {Link} from 'react-router-dom'
import HomeIcon from '@material-ui/icons/Home';
import InfoIcon from '@material-ui/icons/Info';
import MailOutlineIcon from '@material-ui/icons/MailOutline';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import AssignmentIcon from '@material-ui/icons/Assignment';
import {ButtonStyled} from './MenuBar'
import ExitToAppIcon from '@material-ui/icons/ExitToApp'
import { Button } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';

export default function MobileDrawerMenu (props) {
    const {state} = useContext(Store)

    const menuSobre = [
        { name : "Página Inicial", href : "/", icon : <HomeIcon/>},
        { name : "Sobre a Plataforma", href : "sobre", icon : <InfoIcon/>},
        { name : "Contato", href : "contato", icon : <MailOutlineIcon/>},
        { name : "Central de Ajuda", href : "ajuda", icon : <HelpOutlineIcon/>},
        { name : "Termos de Uso", href : "termos", icon : <AssignmentIcon/>},
    ]
    const [selectedIndex, setSelectedIndex] = React.useState(1);
    const handleMenuItemClick = (event, index) => {
        setSelectedIndex(index);
    };

    return (
        <StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
            <MenuBody>
                {
                    menuSobre.map( (item, index) =>
                        <Link to={item.href} className={`menu-buttons ${selectedIndex === index ? 'selected' : ''}`} onClick={(event) => handleMenuItemClick(event, index)}>
                                {item.icon}
                                {item.name}
                        </Link>
                    )
                }
            </MenuBody>
            {
                state.userIsLoggedIn ?
                (
                    <React.Fragment>
                        <span>sim</span>
                    </React.Fragment>
                )
                :
                (
                    <div style={{borderTop : "1px solid #e5e5e5", borderBottom : "1px solid #e5e5e5", marginTop : "10px"}}>

                        <div style={{display : "flex", justifyContent : "center", marginTop : "10px"}}>
                            <ButtonPublicarRecurso onClick={() => {console.log('props.openLogin')}}>
                                PUBLICAR RECURSO?
                            </ButtonPublicarRecurso>
                        </div>

                        <div style={{display : "flex", flexDirection : "row", margin : "10px 0", justifyContent : "center"}}>
                            <div style={{borderRight : "1px solid #e5e5e5"}}>
                                <ButtonStyled onClick={props.openLogin}>
                                    <ExitToAppIcon style={{color:"#00bcd4"}}/>Entrar
                                </ButtonStyled>
                            </div>

                            <div>
                                <ButtonStyled onClick={props.openSignUp}>
                                    Cadastre-se
                                </ButtonStyled>
                            </div>
                        </div>
                    </div>
                )
            }
        </StyledDrawer>
    )
}

const ButtonPublicarRecurso = styled(Button)`
    font-weight : 500 !important;
    border : 1.5px #666 solid !important;
    color: #666;
    box-shadow: none;
    margin : 0 8px !important;
    padding : 6px 25px !important;

`

const StyledDrawer = styled(Drawer)`
    .MuiPaper-root {
        width : 65% !important;
    }
`

const MenuBody = styled.div`
    margin-top : 20px;
    display : flex;
    flex-direction : column;
    color : #666;

    .menu-buttons {
        padding : 10px 16px;
        font-size : 14px;
        font-weight : 500;
        cursor : pointer;
        outline : 0;
        color : #666 !important;
        text-decoration : none  !important;
        background-color : transparent;
        font-family : 'Roboto', sans serif;

        .MuiSvgIcon-root {
            color : #a5a5a5 !important;
            margin-right : 20px;
            vertical-align : middle !important;
            font-weight : normal !important;
            font-style : normal !important;
            font-size : 24px !important;
            line-height : 1 !important;
            letter-spacing : normal !important;
            text-transform : none !important;
            display : inline-block !important;
            white-space : nowrap !important;
            word-wrap : normal !important;
            direction : ltr !important;
        }
    }

    .selected {
        color : #fff !important;
        background-color : #00bcd4;
        .MuiSvgIcon-root {
            color : #fff !important;
        }
    }
`