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

import MarkRating from '../../../components/MarkRating';
import { useParams } from 'react-router';
import { useMyIonQuizContext } from '../../../contexts/MyIonQuiz';
import { useEffect, useState } from 'react';
import { listQuizListeningPracticeContent } from '../../../public_data';
import { LoadingScreen } from '../../../components/LoadingScreen';
import { useAppStateContext } from '../../../contexts/AppState';
import { QUIZ_MAIN_MENU_LINK } from '../../../constants';

const PracticeResult: React.FC = () => {
  let router = useIonRouter();
  let [loading, setLoading] = useState(true);
  const { p_route } = useParams<{ p_route: string }>();
  const i_p_route = parseInt(p_route);
  const [current_question_meta, setCurrentQuestionMeta] = useState<any>(undefined);
  const { listening_practice_result, listening_practice_current_test } = useMyIonQuizContext();
  const [num_rating, setNumRating] = useState<number>(0);
  const { setTabActive, setDisableUserTap } = useAppStateContext();

  useEffect(() => {
    (async () => {
      const res_json = await listQuizListeningPracticeContent();

      setCurrentQuestionMeta(res_json[0]);

      // 一颗星: 答对率 1-49%
      // 两颗星: 答对率 50-79%
      // 三颗星: 答对率 80-100%
      if (listening_practice_result < 50) {
        setNumRating(1);
      } else if (listening_practice_result < 80) {
        setNumRating(2);
      } else {
        setNumRating(3);
      }

      setLoading(false);
    })();
    setTabActive(QUIZ_MAIN_MENU_LINK);
    setDisableUserTap(false);
  }, []);

  if (loading) return <LoadingScreen />;

  return (
    <IonPage>
      <IonContent fullscreen>
        <div
          style={{
            marginTop: '5rem',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <div
            style={{
              width: '50vw',
              height: '30vw',
              borderRadius: '1rem',
              backgroundSize: 'contain',
              backgroundImage: `url(${current_question_meta.cat_image})`
            }}
          ></div>
          <div
            style={{
              marginTop: '3rem',
              fontWeight: 'bold',
              fontSize: '2rem',
              textDecoration: 'underline'
            }}
          >
            Technology
          </div>
          <div style={{ fontWeight: 'bold', fontSize: '2rem', marginTop: '2rem' }}>Well Done</div>

          <div style={{ fontSize: '1.2rem', marginTop: '1rem' }}>Accuracy {listening_practice_result}%</div>

          <div style={{ marginTop: '3rem' }}>
            <MarkRating num_rating={num_rating} />
          </div>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default PracticeResult;
