import { useForm } from '@inertiajs/react'

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

  const handleSubmit = (e) => {
    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.join(', ')}
          </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.join(', ')}
          </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)}
        />
<% 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 %>.join(', ')}
          </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>
  )
}