/*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, { Component, useState, useEffect } from 'react';
import styled from 'styled-components';
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Grid from '@material-ui/core/Grid';
import PublicandoRecursos from '../../img/ajuda/Publicando_recursos.png';
import Why from '../../Components/HelpCenter/TabsResoursePub/Why'
import How from '../../Components/HelpCenter/TabsResoursePub/How'
import Which from '../../Components/HelpCenter/TabsResoursePub/Which'
import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando';
import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando';
import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando';
import  { Link } from 'react-router-dom';







export default function TabResoursePub (props) {
  const tabs= [
    'Por que enviar um recurso?',
    'Como publicar um recurso?',
    'Quais tipos de recursos e formatos de arquivo a plataforma aceita?',
    'Publicando Recursos'
  ]
  
  const [tabValue, setTabValue] = useState(
    Number(props.location.state.value) || 0);

  const handleChangeTab = (e, newValue) => {
    setTabValue(newValue)
}



  return(
    <div style={{backgroundColor:"#f4f4f4"}}>
      <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/>
      
      <Secao>
        <BreadCrumbsDiv>
          <StyledBreadCrumbs>
            <Link to="/" >
                Página Inicial
            </Link>
            <Link to="ajuda" >
              Ajuda
            </Link>
            
            <span>
                {tabs[3]}
            </span>


          </StyledBreadCrumbs>

        </BreadCrumbsDiv>
        <Grid container spacing={4}>
          <Grid item xs={3}>
            <Menu>
              <h4>{tabs[3]}</h4>
              <TabsStyled orientation = "vertical"
                          variant = "scrollable"
                          value = {tabValue}
                          onChange = {handleChangeTab}
                          TabIndicatorProps = {{style:{display: "none"}}}
              >
              <TabStyled label={tabs[0]}></TabStyled>
              <TabStyled label={tabs[1]}></TabStyled>
              <TabStyled label={tabs[2]}></TabStyled>
              </TabsStyled>
              <br/>
              <div className="voltarInicio">
                <a href="ajuda">VOLTAR AO ÍNICIO</a>
              </div>
              <hr/>
              <div className="procurava">
                Não encontrou o que procurava? Entre em 
                <a href="contato"> contato</a>
              </div>
            </Menu>
          </Grid>

          <Grid item xs={9}>
            <Principal>
              <div className="fixo">
                <img src={PublicandoRecursos} alt="Publicando Recursos"/>
                <span>{tabs[3]}</span>
              </div>
              {tabValue === 0 && <Why title={tabs[0]}/>}
              {tabValue === 1 && <How title={tabs[1]}/>}
              {tabValue === 2 && <Which title={tabs[2]}/>}
              <div className="resultadosProcura">
                <span>Não era bem o que você procurava?</span>
                <div className="subtitulo">
                  <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span>
                </div>
              </div>
              <Grid style={{marginBottom:"50px"}} container spacing={2}>
                <Grid item xs={4}>
                  <CardEncontrando/>
                </Grid>
                <Grid item xs={4}>
                  <CardParticipando/>
                </Grid>
                <Grid item xs={4}>
                  <CardGerenciando/>
                </Grid>

              </Grid>

            </Principal>
          </Grid>  
        </Grid>        


      </Secao>
    </div>
  );
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
  display : flex;
  justify-content : flex-start;
  max-width : 1170px;
  span {
    color : #a5a5a5;
  }
  a {
    color: #00bcd4;
    text-decoration: none;
  }

`

const BreadCrumbsDiv = styled.div`

  padding : 10px;
  display : flex;
`


const Principal = styled.div`
  .fixo {
    
    height: 40px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    padding: 30px;
    margin-bottom: 30px;
    color: #666;


    img {
      height: 50px;
      width: 50px;
      margin-right: 40px;
      vertical-align: middle;

    }

    span {
      font-size: 20px;
      vertical-align: ;
    }

    

  }
  .resultadosProcura {
    text-align: center;
    margin-block: 30px;
    padding-inline: 15px;
    color: #666;
    span {
      font-size: 24px;
    }
    .subtitulo {
      margin-top: 10px;

      span {
        font-size: 15px
      }

      a {
        font-size: 15px;
        padding: 0;
        color:#00bcd4;
        text-decoration: none;
      }

    }
  }

`

const TabsStyled = styled(Tabs)`
  
  .Mui-selected {
    background-color: #e7e4e4;
  }

  .MuiTab-root{
    text-transform: none !important;
  }

`

const TabStyled = styled(Tab)`
    
  padding: 4px 15px !important;
  font-weight: 500;
  font-size: 14px !important;
  border-radius: 4px !important;


  


  &:hover {
    background-color: #e7e4e4;
  }
`


const Menu = styled.div`
  width: auto;
  background-color: #fff;
  color: #666;
  padding-block: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px  rgba(0,0,0,.24);

  h4 {
    padding-inline: 15px;
    font-size: 18px;
    margin-block: 10px;
    font-weight: 500;
    line-height: 1.1;
  }

  .voltarInicio {
    padding: 4px 15px;
    font-size: 15px;
    text-align: center;
    a {
      font-size: 15px;
      padding: 0;
      color:#00bcd4;
      text-decoration: none;
    }
  }

  hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .procurava {
    padding: 4px 15px;
    font-size: 15px;
    text-align: center;

    a {
      font-size: 15px;
      padding: 0;
      color:#00bcd4;
      text-decoration: none;
    }

  }

`

const Secao = styled.div`
  width: 1138px;
  margin-inline: auto;

`