import { Head, router } from '@inertiajs/react';
import Heading from '@/components/heading';
import { dashboard } from '@/routes';
import { index } from '@/routes/admin/purchase-orders';
import {
    PurchaseOrderForm
    
    
    
} from './purchase-order-form';
import type {ProductOption, PurchaseOrderFormData, SupplierOption} from './purchase-order-form';

export default function PurchaseOrdersEdit({
    order,
    suppliers,
    products,
}: {
    order: PurchaseOrderFormData;
    suppliers: SupplierOption[];
    products: ProductOption[];
}) {
    return (
        <>
            <Head title={`Modifier ${order.code}`} />

            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading
                    title="Modifier la commande"
                    description="Mettre à jour le bon de commande"
                />

                <PurchaseOrderForm
                    suppliers={suppliers}
                    products={products}
                    order={order}
                    onCancel={() => router.get(index.url())}
                />
            </div>
        </>
    );
}

PurchaseOrdersEdit.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Commandes', href: index() },
        { title: 'Modifier', href: '#' },
    ],
};
