import { useEffect } from "react";
import ms from "pretty-ms";
import styles from "./GamePanel.module.css";
import { useFirstSubmitter, useIsFaded } from "./hooks";
import chime from "../../../assets/chime.mp3";

const chimeAudio = new Audio(chime);
chimeAudio.volume = 0.25;

const RaceMode = ({ rate, cutoffTime }) => {
  const first = useFirstSubmitter(rate, cutoffTime);
  const faded = useIsFaded(first);
  const cutoff = first !== null;

  useEffect(() => {
    if (cutoff) {
      chimeAudio.play();
    }
  }, [cutoff]);

  if (!cutoff) {
    return <></>;
  }

  return (
    <div className={`${styles.cutoff} ${faded ? styles.hidden : ""}`}>
      <div className={styles.cutoffMessage}>
        You were cut off by {first}! Only {ms(cutoffTime * 1000)} left!
      </div>
    </div>
  );
};

export default RaceMode;