import { useState } from 'react' import Link from 'next/link' import Router from 'next/router' import { useLoading, useFlash, getDetailFromResponseError } from 'next-on-rails/utils' import { getInitialResource, useResources, useResourceForm } from 'next-on-rails/resources'

import <%= controller_class_name %>Form from '../../components/<%= plural_table_name %>/form'

const <%= controller_class_name %>Edit = props => {

const loading = useLoading()
const { setFlash } = useFlash()
const [, <%= singular_table_name.camelize(:lower) %>, { update }] = useResources('<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= singular_table_name.camelize(:lower) %>)

const [submit, getError] = useResourceForm(
  update,
  <%= singular_table_name %> => {
    Router.push(`/<%= plural_table_name %>/show?id=${<%= singular_table_name.camelize(:lower) %>.id}`, `/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}`).then(() =>
      setFlash({ notice: '<%= class_name.titleize %> updated successfully' })
    )
  },
  error => {
    setFlash({ alert: getDetailFromResponseError(error) })
  }
)

return (
  <div>
    <div className="position-absolute">{loading ? 'Loading...' : null}</div>
    <div className="container pt-4">
      <h1 className="mb-5">Update <%= class_name.titleize %> #{<%= singular_table_name.camelize(:lower) %>.id}</h1>

      <<%= controller_class_name %>Form <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} submit={submit} getError={getError} />

      <hr />

      <ul className="nav">
        <li className="nav-item">
          <Link href="/<%= plural_table_name %>">
            <a className="nav-link">List <%= controller_class_name.titleize %></a>
          </Link>
        </li>
        <li className="nav-item">
          <Link href={`/<%= plural_table_name %>/show?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}`}>
            <a className="nav-link">Show <%= class_name.titleize %></a>
          </Link>
        </li>
      </ul>
    </div>
  </div>
)

}

<%= controller_class_name %>Edit.getInitialProps = getInitialResource('<%= singular_table_name.camelize(:lower) %>')

export default <%= controller_class_name %>Edit