import { Head, Link } from '@inertiajs/react';
import { useMemo } from 'react';
import { index as expensesIndex, show as expenseDayShow } from '@/actions/App/Http/Controllers/ExpenseDayController';
import { update as expenseUpdate } from '@/actions/App/Http/Controllers/ExpenseController';
import { ExpenseForm } from '@/components/expenses/expense-form';
import { useLanguage } from '@/contexts/language-context';
import AppLayout from '@/layouts/app-layout';
import { dashboard } from '@/routes';

export default function ExpensesEdit({
    expense,
    expenseDay,
    categories,
    paymentMethods,
    statuses,
}) {
    const { t } = useLanguage();
    const p = t.expensesPage;

    const breadcrumbs = useMemo(
        () => [
            { title: t.dashboard.breadcrumb, href: dashboard() },
            { title: p.breadcrumb, href: expensesIndex() },
            { title: expense.voucher_number, href: `/expenses/${expense.id}` },
            { title: p.expenseEditTitle, href: '#' },
        ],
        [t.dashboard.breadcrumb, p, expense],
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={p.expenseEditTitle} />
            <div className="flex flex-1 flex-col gap-6 p-4">
                <ExpenseForm
                    expenseDay={expenseDay}
                    expense={expense}
                    categories={categories}
                    paymentMethods={paymentMethods}
                    statuses={statuses}
                    submitUrl={expenseUpdate.url(expense.id)}
                    method="put"
                    isEdit
                    cancelHref={`/expenses/${expense.id}`}
                />
            </div>
        </AppLayout>
    );
}
