import { Table } from "react-bootstrap";
import PizzaOrderRow from "./PizzaOrderRow";
import { PizzaDayState, PizzaOrder, PizzaVariant, updatePizzaFee } 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({ body: { login: customer, text, price } });
    }

    if (!orders?.length) {
        return <p className="mt-4" style={{ color: 'var(--luncher-text-muted)', fontStyle: 'italic' }}>Zatím žádné objednávky...</p>
    }

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

    return (
        <div className="mt-4" style={{
            background: 'var(--luncher-bg-card)',
            borderRadius: 'var(--luncher-radius-lg)',
            overflow: 'hidden',
            border: '1px solid var(--luncher-border-light)',
            boxShadow: 'var(--luncher-shadow)'
        }}>
            <Table className="mb-0" style={{ color: 'var(--luncher-text)' }}>
                <thead style={{ background: 'var(--luncher-primary-light)' }}>
                    <tr>
                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Jméno</th>
                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Objednávka</th>
                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Poznámka</th>
                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none' }}>Příplatek</th>
                        <th style={{ padding: '16px 20px', color: 'var(--luncher-primary)', fontWeight: 600, border: 'none', textAlign: 'right' }}>Cena</th>
                    </tr>
                </thead>
                <tbody>
                    {orders.map(order => <tr key={order.customer} style={{ borderColor: 'var(--luncher-border-light)' }}>
                        <PizzaOrderRow creator={creator} state={state} order={order} onDelete={onDelete} onFeeModalSave={saveFees} />
                    </tr>)}
                    <tr style={{
                        fontWeight: 700,
                        background: 'var(--luncher-bg-hover)',
                        borderTop: '2px solid var(--luncher-border)'
                    }}>
                        <td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
                        <td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total} Kč`}</td>
                    </tr>
                </tbody>
            </Table>
        </div>
    );
}