import * as React from "react";
import { IOrderVM, ISortItem } from "../../../../../apiModels/ViewModels";
import OrderListItem from "./OrderListItem";

type OrderListTableProps = {
	onColumnNameClick(propName: string): void,
	onOrderItemClick(orderItemId: number): void,
	orders: IOrderVM[],
	sortItem: ISortItem
}

export const OrderListTable = ({ onColumnNameClick, onOrderItemClick, orders, sortItem }: OrderListTableProps) => {
	return (
		<React.Fragment>
			<div className="order__list__table">
				<table>
					<thead>
						<tr>
							<th className="order__item__number">Číslo</th>
							<th onClick={() => onColumnNameClick("TotalPrice")} style={{ cursor: 'pointer' }}>
								{sortItem.expression === "TotalPrice"
									? <i className={`fas fa-arrow-${sortItem.direction === "descending" ? "down" : "up"}`}></i>
									: null
								}
								Cena
							</th>
							<th>Stav</th>
							<th>Platba</th>
							<th>Počet položek</th>
							<th onClick={() => onColumnNameClick("OrderedDate")} style={{ cursor: 'pointer', minWidth: '150px' }}>
								{sortItem.expression === "OrderedDate"
									? <i className={`fas fa-arrow-${sortItem.direction === "descending" ? "down" : "up"}`}></i>
									: null
								}
								Objednáno
							</th>
						</tr>
					</thead>
					<tbody>
						{orders.map(orderListItem => {
							return <OrderListItem
								key={`UserOrderListItem-${orderListItem.id}`}
								onOrderItemClick={onOrderItemClick}
								orderListItem={orderListItem}
							/>
						})}
					</tbody>
				</table>
			</div>
		</React.Fragment>
	);
}
