import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { Route } from 'react-router-dom'

import Tooltip from "../functional/Tooltip"
import Image from "../statics/Image"

import Capitalize from "../../functions/Capitalize"
import urlalize from "../../functions/urlalize"
class Book extends Component {
    constructor(props) {
        super(props)
    }

    render() {
    	let title = this.props.book.title;
    	let banner = this.props.book.banner;
    	let tags = this.props.book.tags;
    	let price = Math.floor(this.props.book.price * 267) + "Ft";
    	let id = this.props.book.id;
    	let description = this.props.book.description.substring(0,200);
        let difficulty = this.props.book.rate
    	description = description + "...";
    	let language = Capitalize(this.props.book.language);
        let stars = []
        for(var i = 0; i < difficulty; i++){
            stars.push(i)
        }
        return (
            <Route render={({ history}) => (
            <div className="book-container" onClick={() => { history.push('/book/' + urlalize(title)) }}>
                <div className="img-container">
                    <Image src={"/static/images/books/"+banner+".jpg"} alt={banner} />
                </div>
                <div className="data">
                    <span className="title">{title}</span>
                    <div className="tags">
                        <div className="tag-container">
                            {tags.map((tag, i) => <span key={i}>{tag}</span>)}
                        </div>
                    </div>
                    <div className="description">{description}</div>
                    <div className="difficulty">{difficulty ? stars.map((star, i) => <span key={i}>&#9733;</span>) : ""}</div>
                </div>
            </div>
            )} />
        )
    }
}

export default Book

Book.contextTypes = {
  store: PropTypes.object,
  functions: PropTypes.object
}