import { Head, router } from '@inertiajs/react';
import Heading from '@/components/heading';
import { dashboard } from '@/routes';
import { create, index } from '@/routes/admin/fixed-assets';
import { FixedAssetForm } from './fixed-asset-form';
import type {
    FixedAssetPrefill,
    MethodOption,
    SupplierInvoiceOption,
} from './fixed-asset-form';

type Accounts = {
    asset_accounts: Array<{ id: number; code: string; label: string }>;
    depreciation_accounts: Array<{ id: number; code: string; label: string }>;
    expense_accounts: Array<{ id: number; code: string; label: string }>;
};

export default function FixedAssetsCreate({
    accounts,
    depreciationMethods,
    supplierInvoices = [],
    prefill = null,
}: {
    accounts: Accounts;
    depreciationMethods: MethodOption[];
    supplierInvoices?: SupplierInvoiceOption[];
    prefill?: FixedAssetPrefill | null;
}) {
    return (
        <>
            <Head title="Nouvelle immobilisation" />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <Heading title="Nouvelle immobilisation" />
                <FixedAssetForm
                    accounts={accounts}
                    depreciationMethods={depreciationMethods}
                    supplierInvoices={supplierInvoices}
                    prefill={prefill}
                    onCancel={() => router.get(index.url())}
                />
            </div>
        </>
    );
}

FixedAssetsCreate.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Immobilisations', href: index() },
        { title: 'Créer', href: create() },
    ],
};