From 43fa15768754889a14268065aec02d7a1df82270 Mon Sep 17 00:00:00 2001
From: juanpabloacosta <acosta.jp@icloud.com>
Date: Thu, 30 Nov 2023 23:33:35 -0500
Subject: [PATCH] Laid out the verbal question exercise, but incomplete (needs
 text to speech).

---
 .../components/VerbalQuestionsExercise.tsx    | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 frontend/src/components/VerbalQuestionsExercise.tsx

diff --git a/frontend/src/components/VerbalQuestionsExercise.tsx b/frontend/src/components/VerbalQuestionsExercise.tsx
new file mode 100644
index 0000000..1d8d01f
--- /dev/null
+++ b/frontend/src/components/VerbalQuestionsExercise.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { getAIMarking } from '../logic/sdk';
+import ClipLoader from "react-spinners/ClipLoader";
+import { Icon } from '@iconify/react';
+
+interface VerbalQuestionProps {
+  question: string;
+  wordBank: string[];
+  expected: string;
+  chapter: string;
+  language: string;
+  onQuestionSubmit: Function;
+}
+
+export default function VerbalQuestionsExercise({question, wordBank, expected, chapter, language, onQuestionSubmit}: VerbalQuestionProps) {
+    const [selectedWords, setSelectedWords] = useState<string[]>([]);
+    const [remainingWords, setRemainingWords] = useState(wordBank);
+    const lastPunctuation = question[question.length - 1];
+    const [answered, setAnswered] = useState(false);
+    const [correct, setCorrect] = useState("");
+    const [reason, setReason] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [isListening, setListening] = useState(false);
+
+    const handleWordBankClick = (word: string) => {
+        setSelectedWords([...selectedWords, word]);
+        setRemainingWords(remainingWords.filter((w) => w !== word));
+    }
+
+    const handleSelectedWordClick = (word: string) => {
+        setRemainingWords([...remainingWords, word]);
+        setSelectedWords(selectedWords.filter((w) => w !== word));
+    }
+
+    const handleSubmit = () => {
+        const userAnswer = selectedWords.join(" ") + lastPunctuation;
+        if (answered) {
+            setAnswered(false);
+            onQuestionSubmit();
+        } else {
+            setLoading(true);
+            getAIMarking(
+                question,
+                userAnswer.toLowerCase(),
+                expected.toLowerCase(),
+                chapter,
+                language
+            ).then((res) => {
+                setLoading(false);
+                setAnswered(true);
+                setCorrect(res.correct);
+                setReason(res.reason);
+            }).catch((e) => console.error(e));
+        }
+
+    }
+
+    const ResponseSection = (correct: string | null, reason: string | null) => {
+        if (!answered) {
+            return (
+                <div className='w-full h-36'>
+                    <div className=' flex-row flex-wrap w-full h-full'>
+                        {remainingWords.map((word, index) => (
+                            <span 
+                            key={index} 
+                            className="border-gray-300 border-2 m-1 p-1 px-3 rounded-xl inline-block cursor-pointer"
+                            onClick={(event) => handleWordBankClick(word)}>
+                                {word}
+                            </span>
+                        ))}
+                    </div>
+                    <button className='green' onClick={(e) => handleSubmit()}>
+                        {loading ? <ClipLoader
+                            color="white"
+                            loading={loading}
+                            aria-label="Loading Spinner"
+                            data-testid="loader"
+                        /> : !answered ? "Submit" : "Continue"}
+                    </button>
+                </div>
+
+            )
+        } else {
+            return (
+                <div className=' flex-row flex-wrap border-b-4 w-full h-36'>
+                    <h3>{correct}</h3>
+                    <p>{reason}</p>
+                    <button className='green w-full' onClick={(e) => handleSubmit()}>{!answered ? "Submit" : "Continue"}</button>
+                </div>
+            )
+        }
+    }
+
+    const  handleListenToQuestion = () => {
+        // TODO: Play static file that holds the audio for the current
+        console.log("Heard you");
+    }
+
+    return (
+        <div className='v-layout space-y-8 items-center w-full'>
+            <h1>What do you hear?</h1>
+            <div className='round box h-min no-shadow relative min-h-[60px] flex items-center justify-center mx-5'>
+                <Icon icon="mdi:volume-high" className="volume-high h-16 w-16" onClick={handleListenToQuestion} />
+            </div>
+            <div className='flex-row flex-wrap border-b-4 w-full h-36'>
+                {selectedWords.map((word, index) => (
+                    <span 
+                        key={index}
+                        className="border-gray-300 border-b-2 border-2 m-1 p-1 px-3 rounded-xl inline-block cursor-pointer"
+                        onClick={(e) => handleSelectedWordClick(word)}>
+                        {word}
+                    </span>
+                ))}
+            </div>
+            {ResponseSection(correct, reason)}
+        </div>
+    )}