import { IonButton } from '@ionic/react';
import QuestionProgress from '../../components/QuestionProgress';
import React, { useEffect, useRef, useState } from 'react';
import { shuffle } from 'ionicons/icons';
import { shuffleArray } from '../../utils/shuffleArray';
import { useMyIonMetric } from '../../contexts/MyIonMetric';
import { useConnectivesRevisionCorrectCount } from '../../contexts/MyIonMetric/ConnectivesRevisionCorrectCount';

interface IQuestionCard {
  num_correct: number;
  total_questions_num: number;
  incNumCorrect: () => void;
  openCorrectToast: () => void;
  openWrongToast: () => void;
  //
  nextQuestion: () => void;
  question_meta: IQuestionMeta;
  //
  answer_list: string[];
}

const QuizContent: React.FC<IQuestionCard> = ({
  num_correct,
  total_questions_num,
  nextQuestion,
  question_meta,
  openCorrectToast,
  openWrongToast,
  incNumCorrect,
  answer_list
}) => {
  let { question_idx, question_fh, question_sh, modal_ans } = question_meta;
  const [ignore_user_tap, setIgnoreUserTap] = useState(false);

  let ref1 = useRef<HTMLIonButtonElement>(null);
  let ref2 = useRef<HTMLIonButtonElement>(null);
  let ref3 = useRef<HTMLIonButtonElement>(null);
  let ref4 = useRef<HTMLIonButtonElement>(null);
  let button_refs = [ref1, ref2, ref3, ref4];

  const { myIonMetricIncConnectivesRevisionCorrectCount } = useConnectivesRevisionCorrectCount();

  function handleUserAnswer(answer: string, ref_button: React.RefObject<HTMLIonButtonElement>) {
    if (ignore_user_tap) return;

    if (answer.toLowerCase() === modal_ans.toLowerCase()) {
      incNumCorrect();
      openCorrectToast();

      myIonMetricIncConnectivesRevisionCorrectCount();

      if (ref_button && ref_button.current) ref_button.current.style.backgroundColor = 'green';
      if (ref_button && ref_button.current) ref_button.current.style.color = 'white';
    } else {
      openWrongToast();
      if (ref_button && ref_button.current) ref_button.current.style.backgroundColor = 'red';
      if (ref_button && ref_button.current) ref_button.current.style.color = 'white';
    }

    setTimeout(() => {
      nextQuestion();
      ResetButtonsStyle();
      setIgnoreUserTap(false);
    }, 1000);
  }

  function ResetButtonsStyle() {
    button_refs.forEach(ref => {
      if (ref && ref.current) ref.current.style.backgroundColor = 'unset';
      if (ref && ref.current) ref.current.style.color = 'unset';
    });
  }

  return (
    <>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          //
          margin: '1rem',
          marginTop: '10vh'
        }}
      >
        <QuestionProgress num_rating={num_correct} num_full_rating={total_questions_num} />

        <div style={{ fontSize: '1.3rem' }}>
          Quiz 1 Q.{question_idx + 1}/{total_questions_num}
        </div>
        <div style={{ marginTop: '1rem', textAlign: 'center' }}>
          Read the text below and choose the best connective.
        </div>
        <div
          style={{
            marginTop: '1rem',
            padding: '3rem',
            border: '1px solid black',
            borderRadius: '1rem'
          }}
        >
          {question_fh} _____ {question_sh}
        </div>
        <div
          style={{
            marginTop: '1rem',
            width: '80%',
            display: 'flex',
            flexDirection: 'column',
            gap: '1rem'
          }}
        >
          {answer_list.map((connective, idx) => {
            return (
              <div>
                <IonButton
                  color={'dark'}
                  ref={button_refs[idx]}
                  size={'large'}
                  fill='outline'
                  expand='block'
                  onClick={() => {
                    setIgnoreUserTap(true);
                    handleUserAnswer(connective, button_refs[idx]);
                  }}
                >
                  {connective}
                </IonButton>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

export default QuizContent;
