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

function ConnectiveRevisionQuizRun() {
  const router = useIonRouter();
  const {
    loadConnectiveRevisionScoreBoard,
    saveConnectiveRevisionResultToScoreBoard,
    connective_revision_current_test,
    connective_revision_progress
  } = useMyIonQuizContext();

  const { setConnectiveRevisionInProgress } = useAppStateContext();

  useEffect(() => {
    setConnectiveRevisionInProgress(false);
    (async () => {
      let all_old_progress = await loadConnectiveRevisionScoreBoard();
      let old_progress = all_old_progress[connective_revision_current_test.toString()] || 0;
      saveConnectiveRevisionResultToScoreBoard(
        connective_revision_current_test.toString(),
        Math.max(old_progress, connective_revision_progress)
      );
    })();
  }, []);

  return (
    <>
      <IonPage>
        <IonContent fullscreen>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            <div
              style={{
                margin: '1rem',
                marginTop: '5rem',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <div>QuizResult</div>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '3rem' }}>
                <div style={{ fontSize: '3rem', marginTop: '1rem' }}>🎉🎉🎉</div>
                <div style={{ fontSize: '1.5rem', marginTop: '1rem' }}>Congraulations !!!</div>
                <div style={{ fontSize: '1.5rem', marginTop: '1rem' }}>Quiz over</div>
              </div>
              <div style={{ marginTop: '3rem' }}>
                <IonButton color={'dark'} fill='outline' onClick={() => router.push(`${QUIZ_MAIN_MENU_LINK}/`)}>
                  {'back to Main Menu'}
                </IonButton>
              </div>
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default ConnectiveRevisionQuizRun;
