/*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, { Component } from "react";
import "./CardsAnimation.css";
import { Container } from "react-grid-system";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import FavoriteIcon from "@material-ui/icons/Favorite";
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
import aplicativo from "../img/laranja/APP.jpg";
import audio from "../img/laranja/AUDIO.jpg";
import vazio from "../img/laranja/EMPTY.jpg";
import imagem from "../img/laranja/IMAGEM.jpg";
import grafico from "../img/laranja/INFOGRAFICO.jpg";
import jogo from "../img/laranja/JOGO.jpg";
import livro from "../img/laranja/LIVRO_DIGITAL.jpg";
import mapa from "../img/laranja/MAPA.jpg";
import outros from "../img/laranja/OUTROS.jpg";
import software from "../img/laranja/SOFTWARE.jpg";
import texto from "../img/laranja/TEXTO.jpg";
import video from "../img/laranja/VIDEO.jpg";
import Rating from "@material-ui/lab/Rating";
import StarBorderIcon from "@material-ui/icons/StarBorder";
import { apiDomain } from "../env";
import AddIcon from "@material-ui/icons/CreateNewFolder";
import Options from "./CardOptions";
import Video from "@material-ui/icons/OndemandVideo";
import noAvatar from "../img/default_profile.png";

const types = [
  { label: "Animação", thumb: animacao },
  { label: "Apresentação", thumb: apresentacao },
  { label: "Aplicativo", thumb: aplicativo },
  { label: "Áudio", thumb: audio },
  { label: "Vazio", thumb: vazio },
  { label: "Imagem", thumb: imagem },
  { label: "Gráfico", thumb: grafico },
  { label: "Jogo", thumb: jogo },
  { label: "Livro", thumb: livro },
  { label: "Livro digital", thumb: livro },
  { label: "Mapa", thumb: mapa },
  { label: "Outros", thumb: outros },
  { label: "Software Educacional", thumb: software },
  { label: "Software", thumb: software },
  { label: "Texto", thumb: texto },
  { label: "Vídeo", thumb: video }
];
const slideStyle = {
  height: "50px",
  width: "50px",
  backgroundColor: "white",
  borderRadius: "50%"
};
const publisherStyle = {
  color: "white",
  paddinLeft: "30px",
  fontSize: "15px"
};

class ResourceCard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      thumbnail: null,
      userStyle: "animatiOff",
      userAvatar: null
    };
  }
  renderType(type){
      if (!this.state.thumbnail) {
          if(!this.props.thumbnail) {
              const aux = types.find(function(element){return element.label === type});
              this.setState({thumbnail: aux.thumb});
          }
          else{
              this.setState({thumbnail: `${apiDomain}` + this.props.thumbnail});
          }
      }
    {/*if (!this.state.thumbnail && !this.props.thumbnail ) {
      var aux = types.find(function(element){ return element.label === type});
      this.setState({thumbnail: aux.thumb});
    }
    if (!this.state.thumbnail && this.props.thumbnail ) {
      this.setState({thumbnail: apiDomain + this.props.thumbnail});
    }*/}
  }
  onHover() {
    this.setState({ userStyle: "animatiOn" });
  }
  onIddle() {
    this.setState({ userStyle: "animatiOff" });
  }
  defAvatar() {
    if (!this.state.userAvatar && !this.props.avatar.length) {
      this.setState({ userAvatar: noAvatar });
    }
    if (!this.state.userAvatar && this.props.avatar) {
      this.setState({ userAvatar: apiDomain + this.props.avatar });
    }
  }
  render() {
    this.renderType(this.props.type);
    this.defAvatar();
    return (
      <Card
        onMouseOver={this.onHover.bind(this)}
        onMouseOut={this.onIddle.bind(this)}
      >
        <Container
          style={{
            padding: "0px",
            height: "175px",
            backgroundColor: "#ff7f00"
          }}
        >
          <div className={this.state.userStyle}>
            <img style={slideStyle} src={this.state.userAvatar} alt="Avatar" />
            <Typography style={publisherStyle}>
              Enviado por: <br />
              {this.props.author}
            </Typography>
          </div>
          <img
            src={this.state.thumbnail}
            style={{ height: "100%" }}
            alt="thumbnail do recurso"
          />
        </Container>
        <CardContent
          style={{ height: "60%", textAlign: "left", paddingBottom: "0px" }}
        >
          <Typography
            variant="body2"
            color="textSecondary"
            component="p"
            style={{ height: "45px", overflow: "hidden", fontSize: "0.8em" }}
          >
            {this.props.name}
          </Typography>
        </CardContent>
        <Container style={{ textAlign: "left" }}>
          <Rating
            name="customized-empty"
            value={this.props.rating * 10}
            precision={0.5}
            emptyIcon={<StarBorderIcon fontSize="inherit" />}
          />
        </Container>
        <CardActions
          style={{ justifyContent: "space-between", padding: "0px" }}
        >
          {this.props.type === "Vídeo" ? (
            <Video style={{ color: "#ff7f00" }} />
          ) : (
            <br />
          )}
          <IconButton aria-label="Favoritar" size="small">
            <FavoriteIcon />
          </IconButton>
        </CardActions>
        <CardActions
          style={{
            borderTop: "1px solid #e5e5e5",
            justifyContent: "space-between"
          }}
        >
          <IconButton aria-label="Guardar" size="small">
            <AddIcon />
          </IconButton>
          <Options />
        </CardActions>
      </Card>
    );
  }
}

export default ResourceCard;