encoach_ui_odoo19/src/components/Solutions/Speaking.tsx

/* eslint-disable @next/next/no-img-element */
import {SpeakingExercise} from "@/interfaces/exam";
import {CommonProps} from ".";
import {Fragment, useEffect, useState} from "react";
import Button from "../Low/Button";
import dynamic from "next/dynamic";
import axios from "axios";
import {speakingReverseMarking} from "@/utils/score";
import {Tab} from "@headlessui/react";
import clsx from "clsx";

const Waveform = dynamic(() => import("../Waveform"), {ssr: false});

export default function Speaking({id, type, title, video_url, text, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
	const [solutionURL, setSolutionURL] = useState<string>();

	useEffect(() => {
		if (userSolutions && userSolutions.length > 0) {
			axios.post(`/api/speaking`, {path: userSolutions[0].solution}, {responseType: "arraybuffer"}).then(({data}) => {
				const blob = new Blob([data], {type: "audio/wav"});
				const url = URL.createObjectURL(blob);

				setSolutionURL(url);
			});
		}
	}, [userSolutions]);

	return (
		<>
			<div className="flex flex-col h-full w-full gap-8 mb-20">
				<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
					<div className="flex flex-col gap-3">
						<span className="font-semibold">{title}</span>
						{!video_url && (
							<span className="font-regular">
								{text.split("\\n").map((line, index) => (
									<Fragment key={index}>
										<span>{line}</span>
										<br />
									</Fragment>
								))}
							</span>
						)}
					</div>
					<div className="flex gap-6">
						{video_url && (
							<div className="flex flex-col gap-4 w-full items-center">
								<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
									<source src={video_url} />
								</video>
							</div>
						)}
						{prompts && prompts.length > 0 && (
							<div className="flex flex-col gap-4">
								<span className="font-bold">You should talk about the following things:</span>
								<div className="flex flex-col gap-1 ml-4">
									{prompts.map((x, index) => (
										<li className="italic" key={index}>
											{x}
										</li>
									))}
								</div>
							</div>
						)}
					</div>
				</div>

				<div className="w-full h-full flex flex-col gap-8">
					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
						<div className="flex gap-8 items-center justify-center py-8">
							{solutionURL && <Waveform audio={solutionURL} waveColor="#FCDDEC" progressColor="#EF5DA8" />}
						</div>
					</div>
					{userSolutions && userSolutions.length > 0 && userSolutions[0].evaluation && typeof userSolutions[0].evaluation !== "string" && (
						<div className="flex flex-col gap-4 w-full">
							<div className="flex gap-4 px-1">
								{Object.keys(userSolutions[0].evaluation!.task_response).map((key) => (
									<div className="bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2" key={key}>
										{key}: Level {userSolutions[0].evaluation!.task_response[key]}
									</div>
								))}
							</div>
							{userSolutions[0].evaluation && userSolutions[0].evaluation.perfect_answer ? (
								<Tab.Group>
									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
										<Tab
											className={({selected}) =>
												clsx(
													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
													"transition duration-300 ease-in-out",
													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
												)
											}>
											Evaluation
										</Tab>
										<Tab
											className={({selected}) =>
												clsx(
													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
													"transition duration-300 ease-in-out",
													selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
												)
											}>
											Recommended Answer
										</Tab>
									</Tab.List>
									<Tab.Panels>
										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
										</Tab.Panel>
										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
											<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
												{userSolutions[0].evaluation!.perfect_answer.replaceAll(/\s{2,}/g, "\n\n")}
											</span>
										</Tab.Panel>
									</Tab.Panels>
								</Tab.Group>
							) : (
								<div className="w-full h-full min-h-fit cursor-text px-7 py-8 bg-ielts-speaking/10 rounded-3xl">
									{userSolutions[0].evaluation!.comment}
								</div>
							)}
						</div>
					)}
				</div>
			</div>

			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
				<Button
					color="purple"
					variant="outline"
					onClick={() =>
						onBack({
							exercise: id,
							solutions: userSolutions,
							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
							type,
						})
					}
					className="max-w-[200px] self-end w-full">
					Back
				</Button>
				<Button
					color="purple"
					onClick={() =>
						onNext({
							exercise: id,
							solutions: userSolutions,
							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
							type,
						})
					}
					className="max-w-[200px] self-end w-full">
					Next
				</Button>
			</div>
		</>
	);
}