import { useForm <%= ', InertiaFormProps ' if inertia_js_version.release == Gem::Version.new('1.3.0') %>} from '@inertiajs/react'
import { FormEvent } from 'react'
import { <%= inertia_model_form_type %>, <%= inertia_model_type %> } from './types'
<% if inertia_js_version.release != Gem::Version.new('1.3.0') %>
// Temporary fix for InertiaFormProps not being exported from @inertiajs/react
type InertiaFormProps<TForm extends Record<string, any>> = ReturnType<typeof useForm<TForm>>
<% end %>
interface FormProps {
  <%= singular_table_name %>: <%= inertia_model_type %>
  onSubmit: (form: InertiaFormProps<<%= inertia_model_form_type %>>) => void
  submitText: string
}

export default function Form({ <%= singular_table_name %>, onSubmit, submitText }: FormProps) {
  const form = useForm<<%= inertia_model_form_type %>>({
<% attributes.reject { |a| a.attachment? || a.attachments? }.each do |attribute| -%>
<% if attribute.password_digest? -%>
    password: '',
    password_confirmation: '',
<% else -%>
    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %>,
<% end -%>
<% end -%>
  })
  const { data, setData, errors, processing } = form

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    onSubmit(form)
  }

  return (
    <form onSubmit={handleSubmit} className="contents">
<% attributes.each do |attribute| -%>
      <div className="my-5">
<% if attribute.password_digest? -%>
        <label htmlFor="password">Password</label>
        <input
          type="password"
          name="password"
          id="password"
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('password', e.target.value)}
        />
        {errors.password && (
          <div className="text-red-500 px-3 py-2 font-medium">
            {errors.password}
          </div>
        )}
      </div>

      <div className="my-5">
        <label htmlFor="password_confirmation">Password confirmation</label>
        <input
          type="password"
          name="password_confirmation"
          id="password_confirmation"
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('password_confirmation', e.target.value)}
        />
        {errors.password_confirmation && (
          <div className="text-red-500 px-3 py-2 font-medium">
            {errors.password_confirmation}
          </div>
        )}
<% else -%>
        <label htmlFor="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
<% if input_type(attribute) == "text_area" -%>
        <textarea
          name="<%= attribute.singular_name %>"
          id="<%= attribute.singular_name %>"
          value={data.<%= attribute.column_name %>}
          rows={4}
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
        />
<% elsif attribute.attachment? -%>
        <input
          type="file"
          name="<%= attribute.singular_name %>"
          id="<%= attribute.singular_name %>"
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('<%= attribute.column_name %>', (e.target.files || [])[0])}
        />
<% elsif attribute.attachments? -%>
        <input
          type="file"
          multiple
          name="<%= attribute.singular_name %>[]"
          id="<%= attribute.singular_name %>"
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files || []))}
        />
<% elsif input_type(attribute) == "checkbox" -%>
        <input
          type="<%= input_type(attribute) %>"
          name="<%= attribute.singular_name %>"
          id="<%= attribute.singular_name %>"
          checked={!!data.<%= attribute.column_name %>}
          className="block mt-2 h-5 w-5"
          onChange={(e) => setData('<%= attribute.column_name %>', e.target.checked)}
        />
<% elsif input_type(attribute) == "number" -%>
        <input
          type="<%= input_type(attribute) %>"
          name="<%= attribute.singular_name %>"
          id="<%= attribute.singular_name %>"
          value={data.<%= attribute.column_name %>}
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('<%= attribute.column_name %>', parseInt(e.target.value))}
        />
<% else -%>
        <input
          type="<%= input_type(attribute) %>"
          name="<%= attribute.singular_name %>"
          id="<%= attribute.singular_name %>"
          value={data.<%= attribute.column_name %>}
          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
        />
<% end -%>
        {errors.<%= attribute.column_name %> && (
          <div className="text-red-500 px-3 py-2 font-medium">
            {errors.<%= attribute.column_name %>}
          </div>
        )}
<% end -%>
      </div>

<% end -%>
      <div className="inline">
        <button
          type="submit"
          disabled={processing}
          className="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
        >
          {submitText}
        </button>
      </div>
    </form>
  )
}