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

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

export default function PizzaOrderList({ state, orders, onDelete, creator }: Readonly<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>
}