/*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 from 'react';
import { Store } from '../../Store.js';
import styled from 'styled-components'
import {Link} from 'react-router-dom';
import EditIcon from '@material-ui/icons/Edit';
import Button from '@material-ui/core/Button';

export default function EditProfileButton () {
    const {state} = React.useContext(Store)

    return (
        <EditProfileAnchor to="/editarperfil">
            <Button>
                {state.windowSize.width >=900 ?
                    (
                        <React.Fragment>
                            <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
                        </React.Fragment>
                    )
                    :
                    (
                        <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
                    )
                }
            </Button>
        </EditProfileAnchor>
    )
}

const EditProfileAnchor = styled(Link)`
  Button {
      box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
      background-color : #fafafa;
      position : absolute;
      right : 5px;
      bottom : 0;
      margin-bottom : 20px;
      color : #666;
      padding : 0 10px;
      text-decoration : none;
      border-radius : 3px;
      @media screen and (min-width: 800px) {
          min-height : 36px;
          min-width : 88px;
      }
      line-height : 36px;
      border : 0;
      display: inline-block;
      text-align : center;
      :hover{
        background-color : #fafafa;
      }
      @media screen and (max-width: 600px) {
          max-width : 44px !important ;
      }
  }
`