/*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 { makeStyles } from '@material-ui/styles';
import Modal from '@material-ui/core/Modal';
import { Carousel } from 'react-responsive-carousel';
import Backdrop from '@material-ui/core/Backdrop';
import Grid from '@material-ui/core/Grid';
import Fade from '@material-ui/core/Fade';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import styled from 'styled-components'

/*Importação de imagens para a página*/
import Handshake from "../img/termos/handshake.svg"




const useStyles = makeStyles(theme => ({
  modal: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  },
  paper: {
    border: '2px solid #000',
    boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)"
  },
  carousel: {
    width: "750px",
    height:"370px",

  }
}));

const CarouselStyled = styled(Carousel)`
  .carousel .control-dots{
    position: inherit !important;
  }
  .carousel .control-arrow {
    background: black !important;
    position: relative !impontant;
  }
  .carousel .control-next.control-arrow::before{
    content: {<ArrowForwardIosIcon/>} !important;
  }
  .carousel.carousel-slider .control-arrow {
      top: 40% !important;
      bottom: 50% !important;
      border-radius: 100% !important;
      opacity: 0.8 !important;
      padding: 12px !important;
  }
  .MuiPaper-elevation1-209{
    box-shadow: none !important;
  }

  .selected{
    height:500px !important;
    width:1366px !important;
  }
`

const carousel = styled.div `

  .termsTemplates{



  }
`


export default function TransitionsModal() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div style={{display:"flex", justifyContent: "center"}}>
      <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}}   type="button" onClick={handleOpen}>
        <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle"}}>VEJA A VERSÃO RESUMIDA</spam>
      </button>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <CarouselStyled className={classes.carousel} showArrows={true} showThumbs={false} infiniteLoop={true} showStatus={false}>

            <div style={{background:"#00BCD4"}} >
              <Grid container spacing={3}>
                <Grid item md={6}>
                  <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.</p>
                </Grid>

                <Grid item md={6} style={{backgroundImage: "url(${Handshake)"}}></Grid>
              </Grid>

            </div>

            <div style={{background:"#673ab7"}}>
              <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>

              <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p>

              <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p>
            </div>

            <div style={{background:"#e81f4f"}}>
              <h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>

              <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>

              <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br/> ou reuso, como aqueles que, para acesso, há demanda de<br/> cadastro ou que têm licenças restritivas.</p>

              <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>

              <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
            </div>

            <div style={{background:"#ff7f00"}}>
              <h2>Como se cadastrar?</h2>
              <div>
                <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se” na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p>
              </div>
            </div>

            <div style={{background:"#1ab9de"}}>
              <h2>O que publicar?</h2>

              <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domínio público. </p>

              <h2>O que não publicar?</h2>

              <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vírus, spam ou comentários abusivos.</p>
            </div>

            <div style={{background:"#673ab7"}}>
              <h3>Direitos do autor e licenças de uso</h3>

              <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponíveis na Plataforma:</p>

              <p>CC-BY</p>

              <p>CC-BY-SA</p>

              <p>CC-BY-NC</p>

              <p>CC-BY-NC-SA</p>

              <p>CC-BY</p>

              <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p>

              <p>NC</p>

              <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p>

              <p>SA</p>

              <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
            </div>

            <div style={{background:"#e81f4f"}}>
              <h2>Respeitamos<br/> a sua privacidade</h2>

              <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p>
              <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p>

              <p>Dúvidas? Leia a íntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
            </div>
          </CarouselStyled>
        </Fade>
      </Modal>
    </div>
  );
}