import { Link, routes } from '@redwoodjs/router'

export const QUERY = gql`
  query FindKaufs {
    kaufs {
      id
      timestamp
      preis_ges
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => {
  return (
    <div className="rw-text-center">
      {'No kaufs yet. '}
    </div>
  )
}

export const Failure = ({ error }) => (
  <div className="rw-cell-error">{error?.message}</div>
)

export const Success = ({ kaufs }) => {
  return (<div className="rw-segment rw-table-wrapper-responsive">
  <table className="rw-table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Timestamp</th>
        <th>Preis ges</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      {kaufs.map((kauf) => (
        <tr key={kauf.id}>
          <td>{truncate(kauf.id+100)}</td>
          <td>{timeTag(kauf.timestamp)}</td>
          <td>{truncate(kauf.preis_ges)}</td>
          <td>
            <nav className="rw-table-actions">
              <Link
                to={routes.kauf({ id: kauf.id })}
                title={'Show kauf ' + kauf.id + ' detail'}
                className="rw-button rw-button-small"
              >
                Show
              </Link>
            </nav>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
</div>)
}