/*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, useEffect } from "react";
import "./carousel.css";
import { Col, Row, Container, Hidden, Visible } from "react-grid-system";
import styled from 'styled-components'
import MaterialCard from "./MaterialCard";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
import recursos from "../img/ilustra_recursos_digitais.png";
import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
import ResourceCardFunction from "./ResourceCardFunction.js";
import CollectionCardFunction from "./CollectionCardFunction.js";
import colecoes_obj from './FormationMaterialsResources/formationMaterials';
import ExpandedMaterial from './ExpandedMaterials';
import {getRequest} from './HelperFunctions/getAxiosConfig.js'
import Grid from '@material-ui/core/Grid';
import {Link} from 'react-router-dom'

function objectsPerPage () {
    var pageWidth = window.innerWidth
    if (pageWidth >= 1200) {
        return 3
    }
    else {
        if (pageWidth > 766) {
            return 2
        }
        else {
            return 1
        }
    }
}

function ReqResources () {
    const [rows, setRows] = useState([])

    function onSuccessfulGet (data) {
        var aux = []
        var resources_per_page = objectsPerPage()
        for (let i = 0; i < 12 / resources_per_page; i++) {
          aux.push(data.slice(i * resources_per_page, resources_per_page * (i + 1)))
        }
        setRows(aux)
    }

    useEffect(() => {
        const url = `/learning_objects?limit=12&sort=["published_at", "desc"]`

        getRequest(url, (data) => onSuccessfulGet(data), (error) => {console.log(error)})
    }, [])

    return (
        <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
          {
            rows.map((row, index) => (
              <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
                {row.map((card) => (
                  <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
                    <ResourceCardFunction
                      avatar={card.publisher.avatar}
                      id={card.id}
                      thumbnail={card.thumbnail}
                      type={card.object_type ? card.object_type : "Outros"}
                      title={card.name}
                      published={card.state === "published" ? true : false}
                      likeCount={card.likes_count}
                      liked={card.liked}
                      rating={card.review_average}
                      author={card.publisher.name}
                      tags={card.tags}
                      href={"/recurso/" + card.id}
                      downloadableLink={card.default_attachment_location}
                    />
                  </div>
                ))}
              </Row>
            ))}
        </Carousel>
    )
}

function ReqCollections () {
    const [rows, setRows] = useState([])

    function onSuccessfulGet (data) {
        var aux = []
        var collections_per_page = objectsPerPage()
        for (let i = 0; i < 12 / collections_per_page; i++) {
          aux.push(data.slice(i * collections_per_page, collections_per_page * (i + 1)))
        }
        setRows(aux)
    }

    useEffect(() => {
        const url = `/collections?limit=12&sort=["updated_at", "desc"]`

        getRequest(url, (data) => onSuccessfulGet(data), (error) => {console.log(error)})
    }, [])

    return (
        <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
          {
            rows.map((row, index) => (
              <Row style={{ paddingBottom: "5px", margin: '0 auto', width: "80%", justifyContent: "center" }} key={(index + 1)}>
                {row.map((card) => (
                  <div style={{ marginLeft: 10, display: 'flex' }} key={card.id * (index + 1)}>
                    <CollectionCardFunction
                      name={card.name}
                      tags={card.tags}
                      rating={card.score}
                      id={card.id}
                      author={card.owner.name}
                      description={card.description}
                      thumbnails={card.items_thumbnails}
                      avatar={card.owner.avatar}
                      likeCount={card.likes_count}
                      followed={card.followed}
                      liked={card.liked}
                      collections={card.collection_items}
                      authorID={card.owner.id}
                    />
                  </div>
                ))}
              </Row>
            ))}
        </Carousel>
    )
}

function TabRecurso () {
    const text = "Nesta área, você tem acesso a Recursos Educacionais Digitais, isto é, a vídeos, animações e a outros recursos destinados à educação. São Recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!"

    return (
        <React.Fragment>
            <div style={{ backgroundColor: "#ff7f00", position: "relative" }}>
                <StyledTab container>
                    <Grid item md={3} xs={12}>
                        <img
                            src={recursos}
                            alt="aba recursos"
                            style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
                        />
                    </Grid>
                    {
                        window.innerWidth <= 501 &&
                        <h4>
                        Recursos Educacionais Digitais
                        </h4>
                    }
                    <Grid item md={6} xs={12}>
                        <p>
                            {text}
                        </p>
                    </Grid>
                    {
                        window.innerWidth <= 501 &&
                        <div style={{display : "flex", justifyContent : "center"}}>
                            <Link to={`/busca?query=&search_class=LearningObject`} className="button-ver">VER RECURSOS</Link>
                        </div>
                    }
                </StyledTab>
            </div>
            {
                window.innerWidth > 501 &&
                <Container style={{ padding: "20px" }}>
                    <p
                        style={{
                            paddingBottom: "5px",
                            borderBottom: "1px solid #ff7f00",
                            color: "#ff7f00",
                        }}
                    >
                        Recursos mais recentes{" "}
                    </p>
                    <Hidden sm xs>
                        <ReqResources />
                    </Hidden>
                    <Visible sm xs>
                        <ReqResources />
                    </Visible>
                </Container>
            }
        </React.Fragment>
    )
}

function TabColecoes () {
    const text = "Nesta área, você tem acesso às coleções criadas e organizadas pelos usuários da plataforma. É mais uma possibilidade de buscar recursos educacionais para sua aula!"

    return (
        <React.Fragment>
            <div style={{ backgroundColor: "#673ab7", position: "relative" }}>
                <StyledTab container>
                    <Grid item md={3} xs={12}>
                        <img
                            src={colecoes}
                            alt="aba recursos"
                            style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
                        />
                    </Grid>
                    {
                        window.innerWidth <= 501 &&
                        <h4>
                        Coleções dos Usuários
                        </h4>
                    }
                    <Grid item md={6} xs={12}>
                    <p>
                        {text}
                    </p>
                    </Grid>
                    {
                        window.innerWidth <= 501 &&
                        <div style={{display : "flex", justifyContent : "center"}}>
                            <Link to={`/busca?query=&search_class=Collection`} className="button-ver">VER COLEÇÕES</Link>
                        </div>
                    }
                </StyledTab>
            </div>
            {
                window.innerWidth > 501 &&
                <Container style={{ padding: "20px" }}>
                    <p
                        style={{
                            paddingBottom: "5px",
                            borderBottom: "1px solid #673ab7",
                            color: "#673ab7",
                        }}
                    >
                        Coleções mais recentes{" "}
                    </p>
                    <ReqCollections />
                </Container>
            }
       </React.Fragment>
    )
}

function TabMateriais () {
    const text = "Nesta área, você acessa livremente materiais completos de formação, como cursos já oferecidos pelo MEC e seus parceiros. São conteúdos elaborados por equipes multidisciplinares e de autoria de pesquisadores e educadores renomados nas áreas."

    const materials = colecoes_obj()

    const [currMaterial, setCurrMaterial] = useState({
        open : false,
        material : {}
    })

    const handleExpandMaterial = (id) => {
        if (id !== currMaterial.material.id)
            setCurrMaterial({
                open: true,
                material: { ...materials[id] }
            })
        else {
            setCurrMaterial({
                open: false,
                material: {}
            })
        }
    }

    return (
        <React.Fragment>
            <div style={{ backgroundColor: "#e81f4f", position: "relative" }}>
                <StyledTab container>
                    <Grid item md={3} xs={12}>
                        <img
                            src={materiais}
                            alt="aba recursos"
                            style={{ float: "left", marginRight: 20, marginBottom: 20, marginLeft: window.innerWidth >= 825 ? "25%" : "0px" }}
                        />
                    </Grid>
                    {
                        window.innerWidth <= 501 &&
                        <h4>
                        Materiais de formação
                        </h4>
                    }
                    <Grid item md={6} xs={12}>
                        <p>
                            {text}
                        </p>
                    </Grid>
                    {
                        window.innerWidth <= 501 &&
                        <div style={{display : "flex", justifyContent : "center"}}>
                            <Link to={`/material-formacao`} className="button-ver">VER MATERIAIS</Link>
                        </div>
                    }
                </StyledTab>
            </div>
            {
                window.innerWidth > 501 &&
                <Container style={{ padding: "20px" }}>
                    <p
                        style={{
                            paddingBottom: "5px",
                            borderBottom: "1px solid #e81f4f",
                            color: "#e81f4f",
                        }}
                    >
                        Materiais mais recentes{" "}
                    </p>
                    <Carousel
                        style={{ padding: "20px" }}
                        showThumbs={false}
                        infiniteLoop={true}
                        showStatus={false}
                    >
                        <Row>
                        {
                            materials.map((material, index) => {
                                return (
                                    <Col md={3} key={index}>
                                        <MaterialCard
                                            name={material.name}
                                            thumb={material.img}
                                            score={material.score}
                                            modules={material.topics}
                                            handleExpand={handleExpandMaterial}
                                            id={index}
                                        />
                                    </Col>
                            )})
                        }
                        </Row>
                    </Carousel>
                    {
                        currMaterial.open ?
                        <ExpandedMaterial material={currMaterial.material} />
                        :
                        null
                    }
                </Container>
            }
        </React.Fragment >
    )
}

export default function AreasSubPages (props) {

    const areaRender = () => {
        switch (props.banner) {
            case "Recursos":
                return <TabRecurso/>
            case "Materiais":
                return <TabMateriais/>
            case "Colecoes":
                return <TabColecoes/>
            default:
                return null
        }
    }

    return (
        <React.Fragment>
            {
                window.innerWidth <= 501 ? (
                    <React.Fragment>
                        <TabRecurso/>
                        <TabMateriais/>
                        <TabColecoes/>
                    </React.Fragment>
                ) : (
                    areaRender()
                )
            }
        </React.Fragment>
    )
}

const StyledTab = styled(Grid)`
    display : flex;
    justify-content : center;
    @media screen and (min-width : 502px) {
        text-align : justify;
    }
    @media screen and (max-width : 502px) {
        text-align : center;
    }
    color : #fff;
    min-height : 190px;
    padding : 20px 10px 20px 10px;

    img {
        float : left;
        max-height : 155px;
    }

    .MuiGrid-grid-xs-12 {
        display : flex;
        justify-content : center;
    }

    h4 {
        font-size : 18px;
        margin : 10px !important;
    }

    p {
        line-height : 1.42857143;
    }

    .button-ver {
        font-size: 14px;
        padding: 5px 10px;
        border: solid 2px #fff;
        border-radius: 7px;
        color: #fff;
        cursor: pointer;
        text-decoration: none;
    }

`