useDynamicFormView

'use client';

import { useDynamicFormView } from '@docyrus/ui/library/hooks/use-dynamic-form-view';
import type { IField, EnumOption } from '@docyrus/ui/components/form-fields';
import { Button } from '@docyrus/ui/primitives/ui/button';

const fields: IField[] = [
  { id: '1', name: 'Full Name', slug: 'full_name', type: 'field-text', validations: ['required'] },
  { id: '2', name: 'Email', slug: 'email', type: 'field-email', validations: ['required'] },
  { id: '3', name: 'Status', slug: 'status', type: 'field-select' },
  { id: '4', name: 'Notes', slug: 'notes', type: 'field-textarea' }
];

const enumOptions: Record<string, EnumOption[]> = {
  status: [
    { id: 'lead', name: 'Lead', color: 'sky-500' },
    { id: 'active', name: 'Active', color: 'emerald-500' }
  ]
};

export function CreateContactForm() {
  const form = useDynamicFormView({
    fields,
    mode: 'create',
    gridColumns: 2,
    enumOptions,
    fieldOrder: ['full_name', 'email', 'status', 'notes'],
    fieldLayout: { notes: { colSpan: 'full' } },
    onSubmit: async (payload) => {
      // Persist to any backend of your choice.
      await fetch('/api/contacts', { method: 'POST', body: JSON.stringify(payload) });
    }
  });

  return (
    <form
      onSubmit={async (event) => {
        event.preventDefault();
        await form.submit();
      }}
      className="space-y-4">
      {form.renderLayout()}

      <div className="flex items-center gap-2">
        <Button type="submit" disabled={form.isSubmitting}>Create Contact</Button>
        <Button type="button" variant="outline" onClick={form.reset}>Reset</Button>
      </div>
    </form>
  );
}

const form = useDynamicFormView({
  fields,
  mode: 'edit',
  initialValues: record,          // seeds the form once (and re-seeds if its content changes)
  enumOptions,
  onSubmit: (payload) => saveContact(record.id, payload)
});

const [values, setValues] = useState(record);

const form = useDynamicFormView({
  fields,
  mode: 'edit',
  values,                         // controlled
  onValuesChange: setValues,      // fires on every field change
  enumOptions
});

const form = useDynamicFormView({
  fields,
  mode: 'view',
  initialValues: record,
  clickToEdit: true,              // rows become inline-editable on click
  enumOptions,
  onSubmit: (payload) => saveContact(record.id, payload)
});

return form.renderLayout();

const form = useDynamicFormView({
  fields,
  mode: 'create',
  gridColumns: 4,
  layout: [
    { id: 'identity', variant: 'fieldset', title: 'Identity', colSpan: 2, columns: 1, collapsible: true, items: ['full_name', 'email'] }
  ],
  fieldLayout: {
    vat_number: { computedHidden: 'is_company != true' },
    total_price: { computedFormula: '$number(qty) * $number(unit_price)', readOnly: true }
  },
  formCustomValidations: [
    { id: 'v1', expression: 'close_date >= open_date', message: 'Close date cannot precede the open date.' }
  ]
});

const form = useDynamicFormView({
  fields,
  onImageUpload: async (file) => uploadToStorage(file),   // → StoredFileValue | null
  onFileUpload: async (file) => uploadToStorage(file)
});

fieldLayout={{
  owner: {
    fieldProps: {
      onSearch: (term) => loadUsers(term),
      searching: isLoading,
      onLoadMore: () => loadNextPage(),
      hasMore
    }
  }
}}