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

import { listQuizListeningPracticeContent } from '../../../public_data/index';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import CorrectionCard from './CorrectionCard';
import { useMyIonQuizContext } from '../../../contexts/MyIonQuiz';
import { LISTENING_PRACTICE_LINK, QUIZ_MAIN_MENU_LINK } from '../../../constants';
import IListeningPracticeQuestion from '../../../interfaces/IListeningPracticeQuestion';
import { useAppStateContext } from '../../../contexts/AppState';

const CorrectionRoute: React.FC = () => {
  const router = useIonRouter();
  const { p_route } = useParams<{ p_route: string }>();
  const i_p_route = parseInt(p_route);
  const { listening_practice_correction_list, Helloworld, appendToListeningPracticeCorrectionList } =
    useMyIonQuizContext();
  const { setTabActive } = useAppStateContext();

  const [current_question_idx, setCurrentQuestionIdx] = useState(0);
  const [question_list, setQuestionList] = useState<IListeningPracticeQuestion[] | []>([]);
  const [current_question_meta, setCurrentQuestionMeta] = useState<any | undefined>(undefined);
  const [answer_list, setAnswerList] = useState<string[]>([]);
  const [num_correct, setNumCorrect] = useState(0);
  const nextQuestion = () => {
    let next_question_idx = current_question_idx + 1;
    setCurrentQuestionIdx(next_question_idx);

    if (next_question_idx >= listening_practice_correction_list.length) {
      router.push(`${LISTENING_PRACTICE_LINK}/finished`, 'none', 'replace');
    }
  };
  const incNumCorrect = () => {
    setNumCorrect(num_correct + 1);
  };

  useEffect(() => {
    setCurrentQuestionMeta(listening_practice_correction_list[current_question_idx]);
  }, [current_question_idx]);

  useEffect(() => {
    (async () => {
      const res_json = await listQuizListeningPracticeContent();
      let init_answer = res_json[i_p_route].init_answer;
      let temp = res_json[i_p_route].content;
      //   let shuffled_temp = shuffleArray(temp);
      setQuestionList(listening_practice_correction_list);
      setAnswerList([...new Set([...init_answer, ...temp.map((t: IListeningPracticeQuestion) => t.word)])]);
      //   setCurrentQuestionMeta(res_json[i_p_route].content[current_question_idx]);
      setCurrentQuestionMeta(listening_practice_correction_list[current_question_idx]);
    })();
    setTabActive(QUIZ_MAIN_MENU_LINK);
  }, []);

  // if (!current_question_meta) return <LoadingScreen />;
  useEffect(() => {
    if (listening_practice_correction_list.length < 1) {
      router.push(`${LISTENING_PRACTICE_LINK}`, 'none', 'replace');
    }
  }, []);

  let [show_press_start, setShowPressStart] = useState(true);
  if (show_press_start)
    return (
      <>
        <IonPage>
          <IonContent fullscreen>
            <div
              style={{
                width: '100%',
                height: '90vh',
                display: 'inline-flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <div style={{ fontSize: '2rem' }}>📝</div>
              <div style={{ marginTop: '1rem', fontSize: '1.2rem', fontWeight: 'bold' }}>correction phase</div>
              <div style={{ marginTop: '3rem  ' }}>
                <IonButton onClick={() => setShowPressStart(false)}>press strat to begin</IonButton>
              </div>
            </div>
          </IonContent>
        </IonPage>
      </>
    );

  return (
    <IonPage>
      <IonContent fullscreen>
        <CorrectionCard
          num_correct={num_correct}
          incNumCorrect={incNumCorrect}
          //
          question_num={current_question_idx}
          nextQuestion={nextQuestion}
          //
          total_questions={question_list.length}
          //
          question_meta={{
            sound: current_question_meta.sound,
            modal_answer: current_question_meta.word
          }}
          answer_list={answer_list}
        />
      </IonContent>
    </IonPage>
  );
};

export default CorrectionRoute;
