import { useForm } from '@inertiajs/react'

export default function ProfileForm() {
  const form = useForm({
    name: '',
    bio: '',
  })

  const submit = (event: React.FormEvent) => {
    event.preventDefault()

    form.put('/profile', {
      preserveScroll: true,
      onSuccess: () => form.defaults(),
    })
  }

  return (
    <form onSubmit={submit} className="space-y-4">
      <div>
        <label htmlFor="name">Tên</label>
        <input
          id="name"
          value={form.data.name}
          onChange={(e) => form.setData('name', e.target.value)}
          aria-invalid={Boolean(form.errors.name)}
          aria-describedby={form.errors.name ? 'name-error' : undefined}
        />
        {form.errors.name && (
          <p id="name-error" role="alert">{form.errors.name}</p>
        )}
      </div>

      <textarea
        value={form.data.bio}
        onChange={(e) => form.setData('bio', e.target.value)}
      />

      <button type="submit" disabled={form.processing || !form.isDirty}>
        {form.processing ? 'Đang lưu…' : 'Lưu thay đổi'}
      </button>

      {form.processing && (
        <button type="button" onClick={() => form.cancel()}>
          Hủy request
        </button>
      )}

      {form.recentlySuccessful && (
        <span role="status">Đã lưu.</span>
      )}
    </form>
  )
}

const form = useForm(`EditProduct:${product.id}`, {
    name: product.name,
    sku: product.sku,
    price: product.price,
})

function submit(e: FormEvent) {
    e.preventDefault()

    form.put(route('products.update', product.id), {
        preserveScroll: 'errors',
        onError: (errors) => {
            if (errors.name) nameRef.current?.focus()
        },
    })
}

<form onSubmit={submit} aria-busy={form.processing}>
    <input
        ref={nameRef}
        value={form.data.name}
        onChange={(e) => form.setData('name', e.target.value)}
        aria-invalid={Boolean(form.errors.name)}
        aria-describedby={form.errors.name ? 'name-error' : undefined}
    />

    {form.errors.name && (
        <p id="name-error" role="alert">
            {form.errors.name}
        </p>
    )}

    <button disabled={form.processing || !form.isDirty}>
        {form.processing ? 'Đang lưu…' : 'Lưu thay đổi'}
    </button>

    {form.recentlySuccessful && (
        <span role="status">Đã lưu</span>
    )}
</form>

const shouldWarn = form.isDirty && !form.processing

const profile = useForm('Settings:Profile', { name: user.name })
const password = useForm('Settings:Password', {
    current_password: '',
    password: '',
    password_confirmation: '',
})

[ ] button disabled khi processing phù hợp
[ ] aria-busy trên region/form
[ ] field error nối bằng aria-describedby
[ ] error quan trọng có role=alert
[ ] success nhẹ có role=status
[ ] focus field lỗi đầu tiên khi hữu ích
[ ] loading text không chỉ dựa vào spinner