/*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 TermsCarousel  from './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 o componente*/
import Handshake from "../img/termos/handshake.svg"
import Pessoa from "../img/termos/Pessoa.svg"
import Email from "../img/termos/Email.svg"
import Seguranca from "../img/termos/Seguranca.svg"
import Aberto from "../img/termos/Aberto.png";
import Fechado from "../img/termos/Fechado.png";
import Arrow_down from "../img/termos/Arrow_down.svg";
import Arrow_double from "../img/termos/Arrow_double.svg";
import Arrow_O from "../img/termos/Arrow_O que é a plataforma.png";
import Arrow_O_1 from "../img/termos/Arrow_O que é a plataforma-1.png";
import Like from "../img/termos/Like.svg";
import Unlike from "../img/termos/Unlike.svg";
import Line from "../img/termos/Line.svg";
import Entenda from "../img/termos/Entenda.svg";
import V from "../img/termos/V.svg";
import OrthogonalLineUp from "../img/termos/OrthogonalLineUp.png"
import OrthogonalLineDown from "../img/termos/OrthogonalLineDown.png"


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",

  }
}));



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"}}>
      <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>

      <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}}   type="button" onClick={handleOpen}>
        <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle",fontWeight: "600",fontSize:"14px"}}>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}>
          <div>
            <TermsCarousel/>
          </div>
        </Fade>
      </Modal>
    </div>
  );
}