import * as React from "react";
import { Link } from "react-router-dom";
import { IProductItem } from "../../../../apiModels/ViewModels"
import { ProductImageController_GetImage } from "../../../../apiClient/routes"
import { AddToCartIcon } from "./AddToCartIcon";
import axios from "axios";

type IProductListItemProps = {
	product: IProductItem
	onAddToCartClick: (productId: number, amount: number) => void;
}

class ProductListItem extends React.Component<IProductListItemProps> {
	render() {
		const { product, onAddToCartClick } = this.props;

		return (
			<React.Fragment>
				<article className="col-lg-3 col-md-4 col-sm-6">
					<div className="featured__item">
						<div className="featured__item__pic set-bg">
							<Link to={`/product/${product.id}`}>
								<img title="Klikněte pro zobrazení detailu produktu"
									src={ product.productImageIDs.length > 0
										? `${axios.defaults.baseURL + ProductImageController_GetImage(product.productImageIDs[0].toString())}`
										: "/img/featured/feature-1.jpg" }
								/>
							</Link>
							{product.availableQuantity > 0
								? <AddToCartIcon onAddToCartClick={onAddToCartClick} product={product} />
								: null
							}
						</div>

						<div className="featured__item__text">
							<h6><Link to={`/product/${product.id}`}>{ product.name }</Link></h6>
							<h5>{product.reducedPrice !== undefined && product.reducedPrice > 0 && product.reducedPrice < product.price
								? product.reducedPrice.toFixed(2)
								: product.price.toFixed(2)} Kč s DPH
							</h5>
							{/*Do budoucna se pridaji ceny bez DPH*/}
							{/*<h6>(0 Kč bez DPH)</h6>*/}
						</div>
					</div>
				</article>
			</React.Fragment>
		);
	}
}

export default ProductListItem;