Auto Form with Nested Objects and Arrays

"use client"

import * as React from "react"

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

export const companySchema: JsonSchema = {
  type: "object",
  title: "Company profile",
  required: ["name", "address", "members"],
  properties: {
    name: { type: "string", title: "Company name", minLength: 2 },
    address: {
      type: "object",
      title: "Registered address",
      required: ["street", "city"],
      properties: {
        street: { type: "string" },
        city: { type: "string" },
        postcode: {
          type: "string",
          pattern: "^[A-Za-z0-9 -]{3,10}$",
          "x-pattern-message":
            "Use 3 to 10 letters, numbers, spaces or dashes.",
        },
      },
    },
    members: {
      type: "array",
      title: "Team members",
      minItems: 1,
      maxItems: 5,
      items: {
        type: "object",
        title: "Member",
        required: ["name", "email"],
        properties: {
          name: { type: "string" },
          email: { type: "string", format: "email" },
          role: {
            type: "string",
            enum: ["owner", "editor", "viewer"],
            default: "editor",
          },
        },
      },
    },
  },
}

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

export function AutoFormNestedArrays({ onSubmit }: AutoFormNestedArraysProps) {
  return (
    <div className="w-full max-w-lg">
      <AutoForm
        schema={companySchema}
        defaultValues={{ members: [{ name: "", email: "", role: "owner" }] }}
        submitLabel="Save company"
        onSubmit={(values) => onSubmit?.(values)}
      />
    </div>
  )
}