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

import Flash from '../../components/flash'

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

const loading = useLoading()
const { setFlash } = useFlash()

const [<%= plural_table_name.camelize(:lower) %>, _, { destroy }] = useResources('<%= plural_table_name.camelize(:lower) %>', props.<%= plural_table_name.camelize(:lower) %>, props.<%= singular_table_name.camelize(:lower) %>)

const clickDestroy = id => event => destroy(id).then(() => setFlash({ notice: '<%= class_name.titleize %> deleted successfully' }))

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

      {<%= 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}>
      <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">
                    <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="btn btn-sm btn-info">Show</a>
                    </Link>
                    <Link href={`/<%= plural_table_name %>/edit?id=${<%= singular_table_name.camelize(:lower) %>.id}`} as={`/<%= plural_table_name %>/${<%= singular_table_name.camelize(:lower) %>.id}/edit`}>
                      <a className="btn btn-sm btn-info">Edit</a>
                    </Link>
                    <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>
      )}

      <hr />

      <ul className="nav">
        <li className="nav-item">
          <Link href="/<%= plural_table_name %>/new">
            <a className="nav-link">New <%= class_name.titleize %></a>
          </Link>
        </li>
        <li className="nav-item">
          <Link href="/<%= plural_table_name %>/crud">
            <a className="nav-link">One Page CRUD</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 %>Index.getInitialProps = getInitialResources('<%= plural_table_name.camelize(:lower) %>')

export default <%= controller_class_name %>Index