/**
 * ReportList component
 *
 * Generated by coz on 2017-01-06,
 * from a template provided by apeman-asset-templates.
 *
 * @function ReportList
 */
'use strict'

import React from 'react'
import defineDebug from 'debug'
import ReportListItem from './report_list_item'
import { uniqueEntities } from 'ore-fol-helpers'

const debug = defineDebug('project:fragment:report-list')

/** @lends ReportList */
const ReportList = ({
  reports, alt
}) => (
  <div className="report-list">
    {
      reports.length === 0 ? (
          <div className="list-alt">{ alt }</div>
        ) : (
          <table className='info-table'>
            <thead>
            <tr>
              <th>Type</th>
              <th>TargetTypeCode</th>
              <th>TargetId</th>
              <th>Text</th>
            </tr>
            </thead>
            <tbody>
            {
              uniqueEntities(reports).map((report) => (
                <ReportListItem key={ report.id }
                                report={ report }
                />
              ))
            }
            </tbody>
          </table>
        )
    }
  </div>
)

export default ReportList