"use client"

import { CrudDialog } from "@/shared/components/crud-dialog"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { useAuthApi } from "@/shared/useApi"
import { INVOICE_SEQUENCE_ROUTES } from "@garage/api"
import { InvoiceSequenceForm } from "./invoice-sequence-form"

export function InvoiceSequenceCrudDialog() {
    const api = useAuthApi()

    return (
        <CrudDialog
            title="Invoice Sequences"
            queryKey={[INVOICE_SEQUENCE_ROUTES.INDEX]}
            getClient={() => api.invoiceSequences}
            resourceLabel="invoice sequence"
            columns={() => [
                {
                    accessorKey: "title",
                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
                },
                {
                    accessorKey: "sequence_title",
                    header: ({ column }) => <ColumnHeader column={column} title="Sequence" />,
                },
                {
                    accessorKey: "prefix",
                    header: ({ column }) => <ColumnHeader column={column} title="Prefix" />,
                },
                {
                    accessorKey: "start_number",
                    header: ({ column }) => <ColumnHeader column={column} title="Start #" />,
                },
            ]}
            renderForm={({ resourceId, initialData, onSuccess }) => (
                <InvoiceSequenceForm
                    resourceId={resourceId}
                    initialData={initialData}
                    onSuccess={onSuccess}
                />
            )}
        />
    )
}