import * as React from "react";
import ShoppingCartListItem from "./ShoppingCartListItem";
import { IShoppingCartItem } from "../../../../apiModels/ViewModels";

type ShoppingCartListProps = {
	cartItems: Array<IShoppingCartItem>,
	onAddToCartClick(productId: number, amount: number): void,
	onDeleteFromCartClick(productId: number): void,
	onRemoveFromCartClick(productId: number, amount: number): void,
}

class ShoppingCartList extends React.Component<ShoppingCartListProps> {
	render() {
		const { cartItems, onAddToCartClick, onDeleteFromCartClick, onRemoveFromCartClick } = this.props;
		return (
			<React.Fragment>
				<div className="shoping__cart__table">
					<table>
						<thead>
							<tr>
								<th className="shoping__product">Produkty</th>
								<th className="shoping__price">Cena (kus)</th>
								<th className="shoping__count">Množství</th>
								<th className="shoping__totalprice">Celková cena</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{cartItems.map((cartItem: IShoppingCartItem) => {
								return <ShoppingCartListItem
									key={"cartItem-" + cartItem.productID}
									cartItem={cartItem}
									onAddToCartClick={onAddToCartClick}
									onDeleteFromCartClick={onDeleteFromCartClick}
									onRemoveFromCartClick={onRemoveFromCartClick}
								/>
							})}
						</tbody>
					</table>
				</div>
			</React.Fragment>
		);
	}
}

export default ShoppingCartList;