import Link from 'next/link' import { useState } from 'react' import { useLoading } from 'next-on-rails/utils' import { getInitialResources, useResources, useResourceForm } from 'next-on-rails/resources'

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

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

const [editMode, setEditMode] = useState(false)
const loading = useLoading()
const [<%= plural_table_name.camelize(:lower) %>, <%= singular_table_name.camelize(:lower) %>, { show, create, update, destroy }, dispatch] = useResources(
  '<%= plural_table_name.camelize(:lower) %>',
  props.<%= plural_table_name.camelize(:lower) %>,
  props.<%= plural_table_name.camelize(:lower) %>[0]
)
const clickShow = id => event => {
  show(id)
  setEditMode(false)
}
const clickEdit = id => event => {
  show(id)
  setEditMode(true)
}
const [submitForCreateAction, getCreateActionError] = useResourceForm(create)
const [submitForUpdateAction, getUpdateActionError] = useResourceForm(update)
const clickDestroy = id => event => destroy(id)
const rowBg = id => (<%= singular_table_name.camelize(:lower) %> && <%= singular_table_name.camelize(:lower) %>.id === id ? 'bg-light' : '')

return (
  <div>
    <div className="position-absolute">{loading ? 'Loading...' : null}</div>
    <div className="container pt-4">
      <h1 className="mb-5"><%= controller_class_name.titleize %></h1>

      <div className="row">
        <div className="col">
          <h3>List <%= controller_class_name.titleize %></h3>
          {<%= plural_table_name.camelize(:lower) %>.length > 0 ? (
            <table className="table">
              <thead>
                <tr>
                  <th>ID</th>

<% attributes_names.each do |attribute_name| -%>

<th><%= attribute_name.titleize %></th>

<% end -%>

    <th></th>
  </tr>
</thead>
<tbody>
  {<%= plural_table_name.camelize(:lower) %>.map(<%= singular_table_name.camelize(:lower) %> => (
    <tr key={<%= singular_table_name.camelize(:lower) %>.id} className={rowBg(<%= singular_table_name.camelize(:lower) %>.id)}>
      <td>{<%= singular_table_name.camelize(:lower) %>.id}</td>

<% attributes_names.each do |attribute_name| -%>

<td>{<%= singular_table_name.camelize(:lower) %>.<%= attribute_name.camelize(:lower) %>}</td>

<% end -%>

                    <td className="text-right">
                      <div className="btn-group">
                        <button onClick={clickShow(<%= singular_table_name.camelize(:lower) %>.id)} className="btn btn-sm btn-info">
                          Show
                        </button>
                        <button onClick={clickEdit(<%= singular_table_name.camelize(:lower) %>.id)} className="btn btn-sm btn-info">
                          Edit
                        </button>
                        <button className="btn btn-sm btn-danger" onClick={clickDestroy(<%= singular_table_name.camelize(:lower) %>.id)}>
                          Delete
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <p>No <%= controller_class_name.titleize %> Found</p>
          )}
        </div>

        <div className="col">
          {<%= singular_table_name.camelize(:lower) %> ? (
            <React.Fragment>
              <h3>{`<%= class_name %> #${<%= singular_table_name.camelize(:lower) %>.id}`}</h3>
              {editMode ? (
                <<%= controller_class_name %>Form key={<%= singular_table_name.camelize(:lower) %>.id} <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} submit={submitForUpdateAction} getError={getUpdateActionError} />
              ) : (
                <<%= controller_class_name %>Details <%= singular_table_name.camelize(:lower) %>={<%= singular_table_name.camelize(:lower) %>} />
              )}
            </React.Fragment>
          ) : (
            <p>No <%= class_name.titleize %> Selected</p>
          )}
        </div>
      </div>

      <hr />

      <div>
        <h3>Create New <%= class_name.titleize %></h3>
        <<%= controller_class_name %>Form submit={submitForCreateAction} getError={getCreateActionError} />
      </div>

      <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="/">
            <a className="nav-link">Go to Home</a>
          </Link>
        </li>
      </ul>
    </div>
  </div>
)

}

<%= controller_class_name %>Crud.getInitialProps = getInitialResources('<%= plural_table_name.camelize(:lower) %>')

export default <%= controller_class_name %>Crud