/*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, useState} from 'react'
import styled from 'styled-components'
import { Store } from '../../../Store.js';
import {Link} from 'react-router-dom'
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 FormInput from "../../FormInput.js"
import ValidateUserInput from '../../FormValidationFunction.js'
import {apiDomain} from '../../../env.js'


export default function TabPanelEditarPerfil (props) {
    const {state, dispatch} = useContext(Store)
    const [hoverAlterarFoto, handleAlterarFoto] = React.useState(false)

    const [formNome, setNome] = useState({
        key : false,
        value : ""
    })

    const [formAboutMe, setAboutMe] = useState({
        key : false,
        value : "",
    })

    const handleHoverAlterarFoto = () => {
        handleAlterarFoto(!hoverAlterarFoto)
    }

    const updateCover = (selectorFiles : FileList) => {
        console.log(selectorFiles)
        console.log(selectorFiles[0].name)
    }

    const handleChange = (e, type) => {
        const userInput = e.target.value
        const flag = ValidateUserInput(type, userInput)

        if(type === 'username') {
            setNome({...formNome,
                key : flag,
                value : userInput
            })
            console.log(formNome)
        }
        else if (type === 'aboutMe') {
            setAboutMe({...formAboutMe,
                key : flag,
                value : userInput,
            })
            console.log(formAboutMe)
        }
    }

    const limpaCamposForm = () => {
        setNome({...formNome,
            key : false,
            value : ''
        })

        setAboutMe({...formAboutMe,
            key : false,
            value : ''
        })
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        const info = {nome : formNome.value, aboutMe : formAboutMe.value}
        const flagNome = formNome.key
        const flagAboutMe = formAboutMe.key

        if (!(flagNome || flagAboutMe)) {
            console.log(info)
            limpaCamposForm()
        }
    }

    return (
        <div className="card-config">
            <h1 style={{fontWeight:"300"}}>Editar Perfil </h1>
                <div className='content-div'>
                    <div style={{padding:"0", display:"flex", flexDirection:"column"}}>
                        <HeaderContainer>
                            <div style={{position:"relative", height:"100%"}}>
                                <img src={`${apiDomain}` + 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" onChange={(e) => updateCover(e.target.files)}/>
                                <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>
                            </div>
                            <ProfileAvatarDiv onMouseEnter={handleHoverAlterarFoto} onMouseLeave={handleHoverAlterarFoto}>
                                <img src={`${apiDomain}` + state.currentUser.userAvatar} alt = "user avatar" style={{border:"0", verticalAlign:"middle"}}/>
                                <ChangeAvatarDiv  style={ {display : hoverAlterarFoto ? 'flex' : 'none'}}>
                                    <span>Alterar Foto</span>
                                </ChangeAvatarDiv>
                            </ProfileAvatarDiv>
                        </HeaderContainer>
                        <br/>
                        <br/>
                        <br/>
                        <br/>
                    </div>

                    <div style={{paddingTop:"90px"}}>
                        <div style={{display:"flex", flexDirection:"row"}}>
                            <form onSubmit={e => handleSubmit(e)}>
                                <FormInput
                                    inputType={"text"}
                                    name={"Nome Completo"}
                                    value={formNome.value}
                                    placeholder={"Nome Completo"}
                                    handleChange={e => handleChange(e, 'username')}
                                    required={true}
                                    error={formNome.key}
                                />
                                <FormInput
                                    inputType={"text"}
                                    name={"Sobre Mim"}
                                    value={formAboutMe.value}
                                    multi = {true}
                                    rows="3"
                                    rowsMax = "3"
                                    error={formAboutMe.key}
                                    placeholder={"Sobre Mim"}
                                    handleChange={e => handleChange(e, 'aboutMe')}
                                    required={false}
                                    help = {formAboutMe.value.length + '/160'}
                                />
                            </form>
                        </div>
                        <ButtonsDiv>
                            <Link to="perfil" ><ButtonCancelar ><span>CANCELAR</span></ButtonCancelar></Link>
                            <ButtonConfirmar onClick={e => handleSubmit(e)}><span>SALVAR ALTERAÇÕES</span></ButtonConfirmar>
                        </ButtonsDiv>
                    </div>
                </div >
        </div>
    )
}

const ButtonConfirmar = styled(Button)`
    background-color : #00bcd4 !important;
    color : #fff !important;
    font-family : 'Roboto',sans-serif !important;
    font-size : 14px !important;
    font-weight : 500 !important;
    padding-left : 16px !important;
    padding-right : 16px !important;
    outline : none !important;
    margin : 6px 8px !important;
    white-space : nowrap !important;
    text-transform : uppercase !important;
    font-weight : bold !important;
    font-size : 14px !important;
    font-style : inherit !important;
    font-variant : inherit !important;
    font-family : inherit !important;
    text-decoration : none !important;
    overflow : hidden !important;
    display : inline-block !important;
    position : relative !important;
    cursor : pointer !important;
    min-height : 36px !important;
    min-width : 88px !important;
    line-height : 36px !important;
    vertical-align : middle !important;
    align-items : center !important;
    text-align : center !important;
    border-radius : 3px !important;
    box-sizing : border-box !important;
    border : 0 !important;
`

export const ButtonCancelar = styled(Button)`
    height : 36px !important;
    padding-left : 16px !important;
    padding-right : 16px !important;
    font-weight : bold !important;
    border-radius : 3px !important;
    outline : none !important;
    text-transform : uppercase !important;
    font-weight : 500 !important;
    font-size : 14px !important;
    font-style : inherit !important;
    font-variant : inherit !important;
    font-family : inherit !important;
    text-decoration : none !important;
    overflow : hidden !important;
    display : inline-block !important;
    position : relative !important;
    cursor : pointer !important;
    min-height : 36px !important;
    min-width : 88px !important;
    line-height : 36px !important;
    vertical-align : middle !important;
    align-items : center !important;
    text-align : center !important;
    border-radius : 3px !important;
    box-sizing : border-box !important;
    user-select : none !important;
    border : 0 !important;
    padding : 0 6px !important;
    margin : 6px 8px !important;
    :hover{
      background-color : #f1f1f1 !important;
    }

`

const ButtonsDiv = styled.div`
    text-align : right;
    margin-top : 80px;
`

const ChangeAvatarDiv = styled.div`
    height : 40px;
    position: absolute;
    width : 100%;
    bottom : 0;
    display : flex;
    background-color : #000;
    color : #fff;
    justify-content : center;
`

const ProfileAvatarDiv = styled.div`
    bottom : -10px;
    left : 120px !important;
    border-radius : 100%;
    position : absolute;
    width : 100px !important;
    height : 100px !important;
    overflow : hidden;
    border : 8px solid #fff;
    outline : 0;
    cursor : pointer;
    z-index : 10;
    background-color : #fff !important;
`

const HeaderContainer = styled.div`
    background-color : #afeeee;
    position : relative;
    height : 150px;
    border-radius : 8px;
`