import { useEffect } from 'react';
import { IonContent, IonPage, useIonRouter } from '@ionic/react';
import { DEFAULT_FORWARD_TIMEOUT, MATCHING_FRENZY_LINK, QUIZ_MAIN_MENU_LINK } from '../../../constants';
import { useAppStateContext } from '../../../contexts/AppState';

function MatchingFrenzyMatchFinished() {
  const router = useIonRouter();

  const { setDisableUserTap, setTabActive, setMatchingFrenzyInProgress } = useAppStateContext();

  useEffect(() => {
    setDisableUserTap(true);
    setMatchingFrenzyInProgress(false);

    setTimeout(() => {
      router.push(`${MATCHING_FRENZY_LINK}/result`, 'none', 'replace');
    }, DEFAULT_FORWARD_TIMEOUT);

    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

  return (
    <>
      <IonPage>
        <IonContent fullscreen>
          <div
            style={{
              width: '100%',
              height: '90vh',
              display: 'inline-flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              fontSize: '1.2rem',
              gap: '1rem'
            }}
          >
            <div style={{ fontSize: '3rem' }}>😜</div>
            <div>Congratulations, </div>
            <div>Match finished</div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default MatchingFrenzyMatchFinished;
