/*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 } from "react";
import { Col, Row, Container } from "react-grid-system";
import { Carousel } from "react-responsive-carousel";
import MaterialCard from "../Components/MaterialCard";
import colecoes_obj from "../Components/FormationMaterialsResources/formationMaterials";
import ExpandedMaterial from "../Components/ExpandedMaterials";
import styled from "styled-components";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link } from "react-router-dom";
import { Paper } from "@material-ui/core";

const MateriaPage = () => {
    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 (
        <>
            <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" />
            <BreadCrumbsDiv>
                <StyledBreadCrumbs>
                    <Link to="/">Página Inicial</Link>
                    <span>Materias de Formação</span>
                </StyledBreadCrumbs>
            </BreadCrumbsDiv>
            <StyledBox>
                <StyledTitle>
                    Materias de formação
                </StyledTitle>
            </StyledBox>
            <MainContainer>
                <Container style={{ padding: "20px" }}>
                    <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>
            </MainContainer>
        </>
    );
};

export default MateriaPage;

const MainContainer = styled.div`
  margin-left: auto;
  margin-right: auto;
  padding: 0;

  @media screen and (min-width: 768px) {
    width: 750px;
  }
  @media screen and (min-width: 992px) {
    width: 970px;
  }
  @media screen and (min-width: 1200px) {
    width: 1170px;
  }
`

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 StyledBox = styled.div`
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,.12), 1px 1px 2px rgba(0,0,0,.24);
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
`
const StyledTitle = styled.span`
    text-align: center;
    color: #e81f4f; 
    font-size: 26px;
    font-family: "Roboto", regular;
    font-weight: 100;
`