import React, { useRef } from 'react';
import { IonButton } from '@ionic/react';
import { useMyIonMetric } from '../../contexts/MyIonMetric';
import { useMatchingFrenzyCorrectCount } from '../../contexts/MyIonMetric/MatchingFrenzyCorrectCount';

interface QuestionCardProps {
  num_correct: number;
  incNumCorrect: () => void;
  //
  nextQuestion: () => void;
  question_meta: { word_c: string; modal_answer: string };
  shuffle_word_list: string[];
}

const MatchingFrenzyCard: React.FC<QuestionCardProps> = ({
  nextQuestion,
  question_meta,
  incNumCorrect,
  num_correct,
  shuffle_word_list
}) => {
  const [ignore_user_tap, setIgnoreUserTap] = React.useState(false);
  let { word_c, modal_answer } = question_meta;
  let { myIonMetricIncMatchingFrenzyCorrectCount } = useMatchingFrenzyCorrectCount();

  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];

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

    if (answer.toLowerCase() === modal_answer.toLowerCase()) {
      myIonMetricIncMatchingFrenzyCorrectCount();
      incNumCorrect();
      //
      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 {
      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(() => {
      ResetButtonsStyle();
      setIgnoreUserTap(false);
      nextQuestion();
    }, 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={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ fontSize: '1.2rem', marginTop: '1rem' }}>Match the correct meaning</div>
        <div
          style={{
            fontSize: '2rem',
            width: '55vw',
            height: '40vw',

            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            border: '1px solid black',
            borderRadius: '1rem',

            marginTop: '2rem'
          }}
        >
          <div style={{ margin: '2rem' }}>{word_c}</div>
        </div>
      </div>
      <div
        style={{
          marginTop: '2rem',
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'space-around',
          rowGap: '1rem'
        }}
      >
        {shuffle_word_list.map((word: string, index: number) => {
          return (
            <div>
              <IonButton
                color='dark'
                ref={button_refs[index]}
                style={{ width: '33vw', height: '33vw' }}
                onClick={() => {
                  setIgnoreUserTap(true);
                  handleUserAnswer(word, button_refs[index]);
                }}
                fill='outline'
              >
                {word}
              </IonButton>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default React.memo(MatchingFrenzyCard);
