/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana
This file is part of Plataforma Integrada MEC.
Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
import React, {useContext} 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 DefaultAvatar from '../img/default_profile0.png'
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import CloudDoneIcon from '@material-ui/icons/CloudDone';
import HistoryIcon from '@material-ui/icons/History';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import FolderOpenIcon from '@material-ui/icons/FolderOpen';
import SettingsIcon from '@material-ui/icons/Settings';
import {apiDomain} from '../env.js'
import {deleteRequest} from './HelperFunctions/getAxiosConfig'
import SearchIcon from '@material-ui/icons/Search';
export default function MobileDrawerMenu (props) {
const {state, dispatch} = 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/>},
{ name : "Busca", href : `busca?query=${state.search.query}&search_class=${state.search.class}`, icon : <SearchIcon/> }
]
// {/*used in dynamic css selection*/}
const [selectedIndex, setSelectedIndex] = React.useState(-1);
const handleMenuItemClick = (event, index) => {
setSelectedIndex(index);
};
const getUserAvatar = () => {
if (state.currentUser.avatar === '' || state.currentUser.avatar == null) {
return DefaultAvatar
}
else {
return apiDomain + state.currentUser.avatar
}
}
// {/*main user actions array */}
const minhaArea = [
{ name: "Publicar Recurso", href: "/termos-publicar-recurso", icon : <CloudUploadIcon/>},
{ name: "Recursos Publicados", href: "/perfil", icon : <CloudDoneIcon/>, value : '1'},
{ name: "Perfil e Atividades", href: "/perfil", icon : <HistoryIcon/>, value : '0'},
{ name: "Favoritos", href: "/perfil", icon : <FavoriteBorderIcon/>, value : '2'},
{ name: "Coleções", href: "/perfil", icon : <FolderOpenIcon/>, value : '3'},
]
function handleSuccessSignOut (data) {
dispatch( {
type: 'USER_LOGGED_OUT',
userLoggedOut: !state.userIsLoggedIn,
})
}
const handleLogout = () => {
const url = `/auth/sign_out`
deleteRequest(url, handleSuccessSignOut, (error) => {console.log(error)})
}
return (
<StyledDrawer anchor={props.anchor} open={props.open} onClose={props.onClose}>
<MenuBody>
{/*Renders menuSobre array options*/}
{
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>
<div style={{borderTop : "1px solid #e5e5e5", borderBottom : "1px solid #e5e5e5", marginTop : "10px", paddingTop : "10px", marginBottom : "10px"}}>
{
/*If user is logged in, render user actions menu; else render log in/sign in buttons*/
state.userIsLoggedIn ?
(
<div style={{display : "flex", flexDirection : "column", color : "#666", paddingBottom : "10px"}}>
<MyArea>
<div className="user-avatar">
<img alt="user-avatar"
src={getUserAvatar()}
/>
</div>
<span className="text">Minha área</span>
</MyArea>
{
minhaArea.map( (item, index) =>
<Link to={{
pathname : item.href,
state: item.value
}}
className={`menu-buttons ${selectedIndex === (index + menuSobre.length) ? 'selected' : ''}`}
onClick={(event) => handleMenuItemClick(event, index + menuSobre.length)}
>
{item.icon}
{item.name}
</Link>
)
}
</div>
)
:
(
<React.Fragment>
<div style={{display : "flex", justifyContent : "center", marginTop : "10px"}}>
<ButtonPublicarRecurso onClick={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>
</React.Fragment>
)
}
</div>
{
/*Renders settings and log off buttons */
state.userIsLoggedIn &&
<React.Fragment>
<Link to={"/editarperfil"} className={`menu-buttons`}>
<SettingsIcon/> Configurações
</Link>
<Link to={"/"} className={`menu-buttons`} onClick={handleLogout}>
<ExitToAppIcon/> Sair
</Link>
</React.Fragment>
}
</StyledDrawer>
)
}
const MyArea = styled.div`
margin : 0 16px;
display : flex;
flex-direction : row;
.text {
font-size : 16px;
color : #666;
align-self : center;
}
.user-avatar {
margin-right : 10px;
align-self : center;
border-radius : 50%;
border : 1px solid #fff;
max-width : 50px;
max-height : 50px;
overflow : hidden;
img {
width : 100%;
height : 100%;
vertical-align : middle;
}
}
`
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;
}
.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;
}
}
`
const MenuBody = styled.div`
margin-top : 20px;
display : flex;
flex-direction : column;
color : #666;
`