Auto Form with Field Overrides

"use client"

import * as React from "react"

import { AutoForm, type JsonSchema } from "@/components/ui/auto-form"

const schema: JsonSchema = {
  type: "object",
  title: "New ticket",
  required: ["subject", "priority"],
  "x-order": ["subject", "priority", "details", "notify", "internalId"],
  properties: {
    internalId: { type: "string", default: "TKT-1042" },
    notify: { type: "boolean", title: "notify" },
    details: { type: "string", maxLength: 1000 },
    priority: {
      type: "string",
      enum: ["low", "normal", "urgent"],
      default: "normal",
    },
    subject: { type: "string", minLength: 3 },
  },
}

export interface AutoFormFieldOverridesProps {
  onSubmit?: (values: Record<string, unknown>) => void
}

export function AutoFormFieldOverrides({
  onSubmit,
}: AutoFormFieldOverridesProps) {
  return (
    <div className="w-full max-w-md">
      <AutoForm
        schema={schema}
        fieldConfig={{
          subject: {
            label: "What do you need help with?",
            placeholder: "Short summary",
          },
          priority: {
            widget: "radio",
            optionLabels: {
              low: "Low (a week)",
              normal: "Normal (2 days)",
              urgent: "Urgent (today)",
            },
          },
          details: {
            widget: "textarea",
            description:
              "Steps to reproduce, what you expected, what happened.",
          },
          notify: { widget: "switch", label: "Email me updates" },
          internalId: { disabled: true, label: "Ticket number" },
        }}
        submitLabel="Open ticket"
        onSubmit={(values) => onSubmit?.(values)}
      />
    </div>
  )
}