import { h, type FunctionComponent } from 'preact'
import Button from './button.tsx'
import { Table, Td, Th } from './table.tsx'

const AdmissionsTable: FunctionComponent<{ admissions: ANY[]; onDelete: ANY; onEdit: ANY; onSortBy: ANY }> = ({
  admissions,
  onDelete,
  onEdit,
  onSortBy,
}) => (
  <Table onSortBy={onSortBy}>
    <thead>
      <tr>
        <Th sort='id'>ID</Th>
        <Th sort='regex'>RegExp</Th>
        <th>Roles</th>
        <Th sort>Created At</Th>
        <th>Created By</th>
        <th />
      </tr>
    </thead>
    <tbody>
      {admissions?.length ? (
        admissions.map((admission) => (
          <tr key={admission.id}>
            <td>{admission.id}</td>
            <td>{admission.regex}</td>
            <td>{admission.roles.map((role: ANY) => role.name).join(', ')}</td>
            <td>{admission.createdAt}</td>
            <td>{admission.createdBy?.email}</td>
            <Td buttons>
              <Button size='small' icon='edit' onClick={() => onEdit(admission.id)}>
                Edit
              </Button>{' '}
              <Button size='small' icon='delete' color='red' onClick={() => onDelete(admission.id)}>
                Delete
              </Button>
            </Td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={6}>No admissions found</td>
        </tr>
      )}
    </tbody>
  </Table>
)

export default AdmissionsTable