/*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, {useState, useContext} from 'react';
import styled from 'styled-components'
import { Container } from 'react-grid-system'
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import Tooltip from '@material-ui/core/Tooltip';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Link from '@material-ui/core/Link';
import Popover from '@material-ui/core/Popover';
import { Store } from '../Store.js';
import EditIcon from '@material-ui/icons/Edit';
import CheckDecagram from '../img/check-decagram-gray.svg'
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Paper from '@material-ui/core/Paper';
import TabPanelAtividades from '../Components/TabPanelAtividades.js'
import TabPanelMeusRecursos from '../Components/TabPanelMeusRecursos.js'
import TabPanelFavoritos from '../Components/TabPanelFavoritos.js'
import TabPanelColecoes from '../Components/TabPanelColecoes.js'
import TabPanelRede from '../Components/TabPanelRede.js'
export default function UserPage (props){
const {state, dispatch} = useContext(Store)
const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)
const [value, setValue] = useState(0);
const handleHoverAlterarFoto = () => {
handleAlterarFoto(!hoverAlterarFoto)
}
const redirect = () => {
props.history.push('/')
}
const handleChangeTab = (event, newValue) => {
setValue(newValue)
}
return (
<>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap" rel="stylesheet"/>
{
state.userIsLoggedIn?
(
[
<React.Fragment>
<HeaderDiv>
<ContainerNoPad>
<BreadcrumbsDiv>
<StyledBreadcrumbs>
<Link href="/" style={{color:"#00bcd4"}}>
Página Inicial
</Link>
<span style={{color:"#a5a5a5"}}>
Minha área
</span>
<span style={{color:"#a5a5a5"}}>
Atividades
</span>
</StyledBreadcrumbs>
</BreadcrumbsDiv>
<div style={{display:"flex", flexDirection:"column"}}>
<MainContainerDesktop>
<Paper elevation={3} style= {{width:"max-content"}}>
<ContainerUserProfile>
<HeaderContainer>
<CoverContainer>
<img src={state.currentUser.userCover} alt = "user cover avatar" style= {{width:"100%", height:"100%", objectFit : "cover" }}/>
<input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
<IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
<PhotoCamera />
</IconButton>
</Tooltip>
</label>
</CoverContainer>
<ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
<img src={state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
<ChangeAvatarDiv style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
<span>Alterar Foto</span>
</ChangeAvatarDiv>
</ProfileAvatarDiv>
<UserProfileInfoDiv>
<p style={{fontSize:"28px", color:"#fff", marginBottom:"2px", fontWeight:"500"}}>{state.currentUser.username}</p>
<div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
<p>{state.currentUser.education}</p>
</div>
</UserProfileInfoDiv>
<EditProfileAnchor href="/perfil/configuracoes/editarperfil">
<Button>
<EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
</Button>
</EditProfileAnchor>
</HeaderContainer>
<CheckTeacherDiv>
<>
{
state.isCollaborativeTeacher ?
(
[
<>
<img src={CheckDecagram} style={{color:"#00bcd4"}}/>
<span>Professor(a)</span>
</>
]
)
:
(
[
<p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
<span style={{cursor:"pointer"}}>
<span style={{paddingRight:"5px"}}>
<img src={CheckDecagram}/>
</span>
Você é professor(a) e gostaria de publicar recursos?
<span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
</span>
</p>
]
)
}
</>
</CheckTeacherDiv>
<RodapeDiv>
<NavBarContentContainer>
<StyledTabs
value ={value}
onChange ={handleChangeTab}
indicatorColor ="primary"
textColor ="primary"
variant = "scrollable"
scrollButtons = "auto"
>
<StyledTab label="Atividades"/>
<StyledTab label="Meus Recursos"/>
<StyledTab label="Favoritos"/>
<StyledTab label="Coleções"/>
<StyledTab label="Rede"/>
</StyledTabs>
</NavBarContentContainer>
</RodapeDiv>
</ContainerUserProfile>
</Paper>
</MainContainerDesktop>
</div>
{value === 0 && <TabPanelAtividades/>}
{value === 1 && <TabPanelMeusRecursos/>}
{value === 2 && <TabPanelFavoritos/>}
{value === 3 && <TabPanelColecoes/>}
{value === 4 && <TabPanelRede/>}
</ContainerNoPad>
</HeaderDiv>
</React.Fragment>
]
)
: (
<>
{redirect()}
</>
)
}
</>
)
}
const HeaderDiv = styled.div`
background-color : #f4f4f4;
color : #666;
font-size : 14px;
line-height : 20px;
padding-bottom : 40px;
`
const ContainerNoPad = styled.div`
min-width : "1170px"
`
const BreadcrumbsDiv = styled.div`
padding : 10px;
display : flex;
justify-content : center;
`
const StyledBreadcrumbs = styled(Breadcrumbs)`
display : flex;
justify-content : flex-start;
max-width : 1170px;
`
const MainContainerDesktop = styled(Container)`
padding : 10px 0 8px 0;
`
const ContainerUserProfile = styled(Container)`
padding : 0;
background-color : #fff;
margin-bottom: 30px;
width : 1170px;
margin-right : auto;
padding-left : 0 !important;
padding-right : 0 !important;
margin-left : auto;
`
const HeaderContainer = styled(Container)`
background-color : #afeeee;
position : relative;
`
const CoverContainer = styled(Container)`
height : 230px;
position : relative;
`
const ProfileAvatarDiv = styled.div`
bottom : -65px;
left : 60px;
border-radius : 100%;
position : absolute;
width : 150px;
height : 150px;
overflow : hidden;
border : 8px solid #fff;
outline : 0;
cursor : pointer;
`
const ChangeAvatarDiv = styled.div`
height : 40px;
position: absolute;
width : 100%;
bottom : 0;
display : flex;
background-color : #000;
color : #fff;
justify-content : center;
`
const UserProfileInfoDiv = styled.div`
position : absolute;
bottom : 0;
left : 260px;
overflow : hidden;
margin-bottom : 20px;
`
const EditProfileAnchor = styled.a`
Button {
background-color : #fafafa;
position : absolute;
right : 5px;
bottom : 0;
margin-bottom : 20px;
color : #666;
padding : 0 10px;
text-decoration : none;
border-radius : 3px;
min-height : 36px;
min-width : 88px;
line-height : 36px;
border : 0;
display: inline-block;
text-align : center;
}
`
const CheckTeacherDiv = styled.div`
font-size : 14px;
padding-top : 10px;
padding-left : 250px;
margin-bottom : -10px;
color : #666 !important;
`
const RodapeDiv = styled.div`
justify-content : flex-end;
display : flex;
`
const NavBarContentContainer = styled(Container)`
background-color : #fff;
padding-bottom : 0;
overflow-x : hidden !important;
overflow-y : hid1den !important;
margin-right : 0 !important;
`
const StyledTabs = styled(Tabs)`
.MuiTab-textColorPrimary.Mui-selected {
color : #00bcd4 !important;
border-bottom-color : #00bcd4 !important;
}
.Mui-selected {
border-bottom-color : #00bcd4 !important;
}
`
const StyledTab = styled(Tab)`
.Mui-selected {
border-bottom-color : #00bcd4 !important;
}
.MuiTab-wrapper {
border-bottom-color : #00bcd4 !important;
}
`