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

type ShoppingCartListItemProps = {
	cartItem: IShoppingCartItem,
	onAddToCartClick(productId: number, amount: number): void,
	onDeleteFromCartClick(productId: number): void,
	onRemoveFromCartClick(productId: number, amount: number): void
}

class ShoppingCartListItem extends React.Component<ShoppingCartListItemProps> {
	render() {
		const { cartItem, onAddToCartClick, onRemoveFromCartClick, onDeleteFromCartClick } = this.props;
		return (
			<React.Fragment>
				<tr>
					<td className="shoping__cart__item">
						<div className="shoping__cart__item__image__wrapper">
							{(cartItem.productImageID !== undefined && cartItem.productImageID !== null)
								?	<Link to={`/product/${cartItem.productID}`}>
										<img src={axios.defaults.baseURL + ProductImageController_GetImage(cartItem.productImageID.toString())} />
									</Link>
								: <img src="img/cart/cart-1.jpg"/>}
							{/* <img src={(cartItem.productImageID !== undefined && cartItem.productImageID !== null)
								? `${axios.defaults.baseURL + ProductImageController_GetImage(cartItem.productImageID.toString())}`
								: "img/cart/cart-1.jpg"} /> */}
						</div>
						<Link to={`/product/${cartItem.productID}`}><h5>{cartItem.name}</h5></Link>
					</td>
					<td className="shoping__cart__price">
						{cartItem.price} Kč
					</td>
					<td className="shoping__cart__quantity">
						<div className="quantity">
							<div className="pro-qty">
								<i onClick={() => onRemoveFromCartClick(cartItem.productID, 1)} className="fas fa-minus qtybtn"></i>
								<input type="text" value={cartItem.amount} readOnly />
								<i onClick={() => onAddToCartClick(cartItem.productID, 1)} className="fas fa-plus qtybtn"></i>
							</div>
						</div>
					</td>
					<td className="shoping__cart__total">
						{ Math.round(((cartItem.price * cartItem.amount) + Number.EPSILON) * 100) / 100} Kč
					</td>
					<td className="shoping__cart__item__close">
						<span onClick={() => onDeleteFromCartClick(cartItem.productID)} className="icon_close_alt2" title="Odebrat produkt"></span>
					</td>
				</tr>
			</React.Fragment>
		);
	}
}

export default ShoppingCartListItem;