/* eslint-disable no-plusplus */
import React from 'react';
import Incident from '../../atoms/incident';
import styles from './incidents.module.scss';

export default function index({ incidents }) {
  const formatIncidents = () => {
    let list = [];

    if (incidents[0].competitor.number === 1) {
      for (let i = 0; i < incidents[0].incidents.length; i++) {
        incidents[0].incidents[i].home = true;
      }
    }

    const one = incidents[0]?.incidents ? incidents[0]?.incidents : [];
    const two = incidents[1]?.incidents ? incidents[1]?.incidents : [];
    list = [...one, ...two];
    return list.sort((a, b) => a.match_time - b.match_time);
  };

  const incidentList = incidents && formatIncidents();

  return incidentList && incidentList.length > 0 ? (
    incidentList.map((incident) => <Incident incident={incident} />)
  ) : (
    <span className={styles.notavailable}>
      Match statistics currently not available. Key match statistics will be displayed here.
    </span>
  );
}
