import React from 'react';
import Modularity from 'modularity-front';
import {Button , TextInput} from 'react-materialize';
import ImageGallery from 'react-image-gallery';


import Embed from '../UserInputs/Embed';
import Toast from '../../helpers/Toast';
import Dictionary from '../../Services/DictionaryService';
import "react-image-gallery/styles/css/image-gallery.css";
import "./Present.css";

let Module = Modularity.Module;
class Present extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
			quantity: 1
		}
	}

	add() {
		this.addToCart.set(this.state.quantity);
		Toast.success('Added ' + this.state.quantity + ' ' +this.Product.value.name+' to your cart');
	}

	render() {
		let product = this.Product.value;
		return(
			<div className={this.props.ClassName}>
				<div className="ProductContainer">
					<div className="ProductTop row">
						<div className="ProductImage col s12 m4 l3">
							<ImageGallery items={
								(product.images || [product.image]).map((img) => {return { original: img, thumbnail: img };})
							} showPlayButton={false} />
						</div>
						<div className="col s12 m8 l9 ProductShop">
							<div className="row">
								<div className="col s12 l8 ProductName">
									<h5 style={{paddingBottom: 10}}>{product.name}</h5>
									<Embed html={product.shortdescription}>
									</Embed>
									{product.reference  && <p><b>{Dictionary.get("Reference")}</b> - {product.reference}</p>}
									{product.ean13 		&& <p>EAN 13: {product.ean13}</p>}
								</div>
								{!this.props.noBuy && <div className="card col s12 l4 center ProductPrice">
									<h5>
										<div>{(product.price || 0).toFixed(2)} €</div>
										<small>χωρίς ΦΠΑ {(product.price * 0.76).toFixed(2)}</small>
									</h5>

									<div>
										<span>{Dictionary.get("Quantity")}</span>
										<div className="ProductQuantity">
											<Button flat onClick={() => this.setState({quantity: this.state.quantity - 1 || 1})}>-</Button>
											<span style={{padding: 10}}>{this.state.quantity}</span>
											<Button flat onClick={() => this.setState({quantity: (this.state.quantity + 1) <= product.quantity ? this.state.quantity + 1 : this.state.quantity})}>+</Button>
										</div>
										<small>{Dictionary.get("Available")} {product.quantity}</small>
									</div>
									<br />
									{product.quantity > 0 && <Button onClick={() => this.add()}>{Dictionary.get("Add to Cart")}</Button>}
								</div>}
							</div>
						</div>
					</div>
					<div className="ProductContent">
						<h5>{Dictionary.get("Description")}</h5>
						<Embed html={product.description}></Embed>
					</div>
				</div>
				{super.render()}
			</div>
			);
				    
	}
}

Present.EditPosition = "center";
Present.Inputs = {
	Product: {
		type: Module.Types.Object,
		defaultValue: {
			name: "Test product Name",
			description: "Test description",
			price: 12.34,
			images: ["/car1.jpg", "/car2.jpg", "/car3.jpg"]
		}
	},
	ClassName: {
		type: Module.Types.Text
	}
}

Present.Outputs ={
	addToCart: {}
}

Present.Category = "Nikatlas";
export default Present;