import { IonButton, IonToast } from '@ionic/react';
import './style.css';
// import QuestionProgress from './QuestionProgress';
import QuestionProgress from '../../../components/QuestionProgress';
import { HelloworldImage } from '../../../components/HelloworldImage';
import { useState } from 'react';

interface QuestionCardProps {
  question_num: number;
  nextQuestion: () => void;
  num_correct: number;
  incNumCorrect: () => void;
}

const QuestionCard: React.FC<QuestionCardProps> = ({ num_correct, question_num, nextQuestion, incNumCorrect }) => {
  const [isOpenCorrectAnswer, setIsOpenCorrectAnswer] = useState(false);
  const [isOpenWrongAnswer, setIsOpenWrongAnswer] = useState(false);

  return (
    <>
      {/*  */}
      <IonButton onClick={() => setIsOpenCorrectAnswer(true)}>Good job</IonButton>
      <IonToast
        isOpen={isOpenCorrectAnswer}
        message={'hello correct answer'}
        onDidDismiss={() => setIsOpenCorrectAnswer(false)}
        duration={5000}
        color='success'
      ></IonToast>

      {/*  */}
      <IonButton onClick={() => setIsOpenWrongAnswer(true)}>Wrong Answer</IonButton>
      <IonToast
        isOpen={isOpenWrongAnswer}
        message='Wrong answer toast'
        onDidDismiss={() => setIsOpenWrongAnswer(false)}
        duration={5000}
        color='danger'
      ></IonToast>

      {/*  */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
          <QuestionProgress num_rating={1} num_full_rating={3} />
        </div>
        <div>Question card {question_num}</div>
        <div style={{ width: '12rem', height: '12rem' }}>
          <HelloworldImage />
        </div>
        <div>Select the word you heard</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '1rem' }}>
          <div>
            <IonButton>Keyboard</IonButton>
          </div>
          <div>
            <IonButton>Keyboard</IonButton>
          </div>
          <div>
            <IonButton>Keyboard</IonButton>
          </div>
        </div>
      </div>
      {/*  */}
      <div>num_correct: {num_correct}</div>
      <div>
        <IonButton onClick={nextQuestion}>next question</IonButton>
        <IonButton onClick={incNumCorrect}>mark question correct</IonButton>
      </div>
    </>
  );
};

export default QuestionCard;
