"use client"

import { CrudDialog } from "@/shared/components/crud-dialog"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { useAuthApi } from "@/shared/useApi"
import { TASK_SECTION_ROUTES } from "@garage/api"
import { TaskSectionForm } from "./task-section-form"

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

    return (
        <CrudDialog
            title="Task Section"
            queryKey={[TASK_SECTION_ROUTES.INDEX]}
            getClient={() => api.taskSections}
            resourceLabel="task section"
            columns={() => [
                {
                    accessorKey: "title",
                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
                },
                {
                    accessorKey: "arrangement",
                    header: ({ column }) => <ColumnHeader column={column} title="Order" />,
                },
                {
                    accessorKey: "is_default",
                    header: () => <span>Default</span>,
                    cell: ({ row }) => ((row.original as any).is_default ? "Yes" : "No"),
                    enableSorting: false,
                },
            ]}
            renderForm={({ resourceId, initialData, onSuccess }) => (
                <TaskSectionForm
                    resourceId={resourceId}
                    initialData={initialData}
                    onSuccess={onSuccess}
                />
            )}
        />
    )
}