/*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, { useState, useContext } from 'react';
import '../App.css';
import styled from 'styled-components'
// import SearchBar from './SearchBar';
import { Row } from 'react-grid-system';
import { MdInfoOutline } from "react-icons/md"
import { FaRegPlayCircle } from "react-icons/fa";
import ModalVideoApresentacao from "./ModalVideoApresentacao.js"
import { Link } from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import HomeScreenSearchBar from './HomeScreenSearchBar'
import { Store } from '../Store'

//Image Import
import { banner } from "ImportImages.js";
import { bannerMobile } from "ImportImages.js";

export default function SearchSection(props) {
    const { state } = useContext(Store)
    const [modalOpen, handleModal] = useState(false)
    const toggleModal = () => { handleModal(!modalOpen) }

    const WIDTH = window.innerWidth;
    return (
        <React.Fragment>
            <ModalVideoApresentacao open={modalOpen} handleClose={toggleModal} />
            <Banner contrast={state.contrast}>
                <StyledGrid container direction="row" justify="center">
                    <Grid item style={{ paddingRight: "15px", paddingLeft: "15px", paddingBottom: "120px" }}>
                        <div className="title">
                            <h2>
                                Plataforma MEC de Recursos Educacionais Digitais
                            </h2>
                            <h3>
                                Encontre e compartilhe vídeos, animações e muitos outros Recursos
                            </h3>
                        </div>
                        <HomeScreenSearchBar />
                        <div className="links">
                            <Link to="/sobre">
                                <MdInfoOutline size="24px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} />
                                {WIDTH <= 501 ? <span className={`${state.contrast}LinkColor`}>SOBRE</span> : <span className={`${state.contrast}LinkColor`}>SOBRE A PLATAFORMA</span>}
                            </Link>
                            <span onClick={toggleModal} className={`${state.contrast}LinkColor`} style={{ cursor: "pointer" }}>
                                <FaRegPlayCircle size="20px" style={{ verticalAlign: "middle", paddingRight: "5px", color: "white" }} />
                                {WIDTH <= 501 ? ("VÍDEO") : ("VÍDEO DE APRESENTAÇÃO")}
                            </span>
                        </div>
                    </Grid>
                </StyledGrid>
                {
                    WIDTH > 501 &&
                    <Row justify="center" style={{ marginLeft: 0, marginRight: 0 }}>
                        <button className="recurso"
                            onClick={() => { props.function("Recursos") }}>
                            Recursos Educacionais Digitais
                        </button>

                        <button className="material-formacao"
                            onClick={() => { props.function("Materiais") }}>
                            Materiais de Formação
                        </button>

                        <button className="colecao"
                            onClick={() => { props.function("Colecoes") }}>
                            Coleções dos Usuários
                        </button>
                    </Row>
                }
            </Banner>
        </React.Fragment>
    )
}

const StyledGrid = styled(Grid)`
    margin: 0 auto !important;
    color : #fff !important;
    text-align : center !important;
`

const Banner = styled.div`
    width : 100%;
    @media screen and (max-width : 501px) {
        background-image : url(${bannerMobile});
    }
    @media screen and (min-width : 502px) {
        background-image : url(${banner});
    }
    background-size : cover;
    text-align : center;

    .title {
        color : white;
        padding-top : 80px;
        font-size : 22px;

        h2 {
            margin-top : 0 !important;
            margin-bottom : 10px !important;
        }

        h3 {
            font-weight : 100;
            font-size : 24px;
            margin : 0 !important;
        }
    }

    .links {
        margin-top : 20px;
        color : white;
        display : flex;
        justify-content : space-around;

        a {
            color : #fff;
            text-decoration : none !important;
            outline : none;
            padding-right : 10px;
        }
    }

    button {
        align-items: flex-start;
        font-size: 1.14em;
        text-align: center;
        cursor: pointer;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        line-height: 1.42857143;
        width: 25%;
        margin-top: 1%;
        color: ${props => props.contrast === "" ? "white" : "yellow"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
        border: ${props => props.contrast === "" ? "none" : "1px solid white"};
        padding: 1.2%;
        border-width: 5%;
        border-style: none;
        border-image: initial;
        outline : none;
    }

    .recurso {
        background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"};
    }
    .material-formacao {
        background-color: ${props => props.contrast === "" ? "#e81f4f" : "black"};
    }
    .colecao {
        background-color: ${props => props.contrast === "" ? "#673ab7" : "black"};
    }
`