import { IonContent, IonPage, useIonRouter } from '@ionic/react';

import { useEffect, useState } from 'react';
import { DEFAULT_FORWARD_TIMEOUT, LISTENING_PRACTICE_LINK, QUIZ_MAIN_MENU_LINK } from '../../../constants';
import { useAppStateContext } from '../../../contexts/AppState';

import './style.css';

const PracticeFinish: React.FC = () => {
  const router = useIonRouter();
  const { setListeningPracticeInProgress } = useAppStateContext();
  const { setDisableUserTap, setTabActive } = useAppStateContext();

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

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

    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

  return (
    <>
      <IonPage>
        <IonContent fullscreen>
          <div
            style={{
              height: '85vh',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              gap: '2rem'
            }}
          >
            <div style={{ fontSize: '3rem' }}>🎉🎉🎉</div>
            <div
              style={{
                fontSize: '1.5rem',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <div>Quiz finished</div>
              <div>Please take a rest</div>
              😊
            </div>
            <div style={{ fontSize: '0.8rem' }}>redirecting you in 3 seconds</div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
};

export default PracticeFinish;
