import { useEffect, useState } from "react";
import { dispatch, useGameId } from "../../../domain/gameStore";
import { usePlayers } from "../../../hooks/useGameInfo";
import styles from "./GamePanel.module.css";

// okay, in an ideal world this would be part of the game store or something
// and it would get properly managed by reactive state
// but also, this totally works as is, and the only downside is it might potentially grow too big
// but that only happens if someone plays that many gun games without ever leaving the window
const shownItems = new Set();

const KillFeed = () => {
  const gameId = useGameId();
  const players = usePlayers();
  useEffect(() => {
    if (players?.find(({ currentRound }) => currentRound === null)) {
      dispatch.goToSummary();
    }
  }, [players]);
  const [shownItemsState, setShownItemsState] = useState(shownItems);
  const [display, setDisplay] = useState([]);
  useEffect(() => {
    const toDisplay =
      players
        ?.flatMap(({ name, guesses }) =>
          Object.entries(guesses).map(([round, { score }]) => ({
            name,
            round,
            score,
          }))
        )
        ?.filter(
          ({ name, round }) =>
            !shownItemsState.has(`${gameId}-${name}-${round}`)
        ) ?? [];
    setDisplay(toDisplay);
    const timeouts = [];
    toDisplay.forEach(({ name, round }) => {
      timeouts.push(
        setTimeout(() => {
          shownItems.add(`${gameId}-${name}-${round}`);
          setShownItemsState(new Set(shownItems));
        }, 5000)
      );
    });
    return () => {
      timeouts.forEach(t => clearTimeout(t));
    };
  }, [shownItemsState, gameId, players]);
  return (
    <div className={styles.killFeed}>
      {display.map(({ name, round, score }) => (
        <span key={`${name}-${round}`} className={styles.killFeedItem}>
          <span className={styles.killFeedName}>{name}</span>{" "}
          {score >= 4950 ? "🎯" : "🖱️"} 🗺️ {round}
        </span>
      ))}
    </div>
  );
};

export default KillFeed;