import { Table } from "react-bootstrap";
import { Order, PizzaDayState, PizzaOrder } from "../types";
import PizzaOrderRow from "./PizzaOrderRow";
import { updatePizzaFee } from "../api/PizzaDayApi";

type Props = {
    state: PizzaDayState,
    orders: Order[],
    onDelete: (pizzaOrder: PizzaOrder) => void,
    creator: string,
}

export default function PizzaOrderList({ state, orders, onDelete, creator }: Props) {
    const saveFees = async (customer: string, text?: string, price?: number) => {
        await updatePizzaFee(customer, text, price);
    }

    if (!orders?.length) {
        return <p className="mt-3"><i>Zatím žádné objednávky...</i></p>
    }

    const total = orders.reduce((total, order) => total + order.totalPrice, 0);

    return <>
        <Table className="mt-3" striped bordered hover>
            <thead>
                <tr>
                    <th>Jméno</th>
                    <th>Objednávka</th>
                    <th>Poznámka</th>
                    <th>Příplatek</th>
                    <th>Cena</th>
                </tr>
            </thead>
            <tbody>
                {orders.map(order => <tr key={order.customer}>
                    <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
                </tr>)}
                <tr style={{ fontWeight: 'bold' }}>
                    <td colSpan={4}>Celkem</td>
                    <td>{`${total} Kč`}</td>
                </tr>
            </tbody>
        </Table>
    </>
}