import { Head, router } from '@inertiajs/react';
import Heading from '@/components/heading';
import { dashboard } from '@/routes';
import {
    create as invoicesCreate,
    index as invoicesIndex,
} from '@/routes/admin/invoices';
import { InvoiceForm } from './invoice-form';
import type {
    CustomerOption,
    ProductOption,
    ServiceOption,
    WarehouseOption,
} from './invoice-form';

export default function InvoicesCreate({
    customers,
    products,
    services,
    warehouses,
    defaultTaxRate,
}: {
    customers: CustomerOption[];
    products: ProductOption[];
    services: ServiceOption[];
    warehouses: WarehouseOption[];
    defaultTaxRate: number;
}) {
    return (
        <>
            <Head title="Nouvelle facture" />

            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading
                    title="Nouvelle facture"
                    description="Création d'une facture client"
                />

                <InvoiceForm
                    customers={customers}
                    products={products}
                    services={services}
                    warehouses={warehouses}
                    defaultTaxRate={defaultTaxRate}
                    onCancel={() => router.get(invoicesIndex.url())}
                />
            </div>
        </>
    );
}

InvoicesCreate.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Facturation', href: invoicesIndex.url() },
        { title: 'Nouvelle facture', href: invoicesCreate.url() },
    ],
};
