// @flow

import React from 'react';
import styles from './AttendanceStatus.css';
import withModal from './withModal';
import type { EventPool } from 'app/models';

type AttendanceElementProps = {
  pool: EventPool,
  index: number,
  toggleModal: number => void
};

const AttendanceElement = ({
  pool: { name, registrations, registrationCount, capacity },
  index,
  toggleModal
}: AttendanceElementProps) => {
  const Status = () => (
    <strong>{`${registrationCount}/${capacity ? capacity : '∞'}`}</strong>
  );

  return (
    <div className={styles.poolBox}>
      <strong>{name}</strong>
      {registrations ? (
        <a onClick={() => toggleModal(index)}>
          <Status />
        </a>
      ) : (
        <Status />
      )}
    </div>
  );
};

export type AttendanceStatusProps = {
  pools: Array<EventPool>,
  toggleModal: number => void
};

const AttendanceStatus = ({ pools, toggleModal }: AttendanceStatusProps) => {
  const toggleKey = key => (pools.length > 1 ? key + 1 : key);
  return (
    <div className={styles.attendanceBox}>
      {(pools || []).map((pool, index) => (
        <AttendanceElement
          key={index}
          pool={pool}
          index={index}
          toggleModal={key => toggleModal(toggleKey(key))}
        />
      ))}
    </div>
  );
};

AttendanceStatus.Modal = withModal(AttendanceStatus);

export default AttendanceStatus;

@@ -398,32 +398,111 @@
 mentProps) =%3E %7B%0A
+  const totalCount = registrations ? registrations.length : registrationCount;%0A
   const Status =
@@ -526,28 +526,21 @@
 ong%3E%7B%60$%7B
-registration
+total
 Count%7D/$

Revert "Always use registrationCount when calculating numbers"