import { useEffect, useState } from 'react';
import { useParams } from 'react-router';

import { listMatchingFrenzyContent } from '../../public_data';
import { IonContent, IonIcon, IonPage, useIonRouter } from '@ionic/react';
import { alarmOutline } from 'ionicons/icons';

import { LoadingScreen } from '../../components/LoadingScreen';
import IMatchingFrenzyQuestion from '../../interfaces/IMatchingFrenzyQuestion';
import { MATCHING_FRENZY_LINK, QUIZ_MAIN_MENU_LINK } from '../../constants';
import MatchingFrenzyCard from './MatchingFrenzyCard';
import { useMyIonQuizContext } from '../../contexts/MyIonQuiz';
import PressStartToBegin from './PressStartToBegin';
import { useAppStateContext } from '../../contexts/AppState';
// import Helloworld from './Helloworld';
import { shuffleArray } from '../../utils/shuffleArray';

import './style.css';

function CountDown({
  start_match,
  init_time_left_s,
  setCountDown_s
}: {
  start_match: boolean;
  init_time_left_s: number;
  setCountDown_s: (count_down_s: number) => void;
}) {
  useEffect(() => {
    let time_left = init_time_left_s;
    let int_timer: NodeJS.Timeout | undefined = undefined;

    if (start_match) {
      int_timer = setInterval(() => {
        time_left = time_left - 1;
        setCountDown_s(Math.max(time_left - 1, 0));
      }, 1000);
    }

    return () => {
      clearInterval(int_timer);
    };
  }, [start_match]);

  return <></>;
}

export default CountDown;
