import AudioPlayer from "@/components/Low/AudioPlayer";
import Button from "@/components/Low/Button";
import { Script } from "@/interfaces/exam";
import { Assignment } from "@/interfaces/results";
import { v4 } from "uuid";

interface Props {
    audioSource?: string;
    repeatableTimes?: number;
    timesListened: number;
    script?: Script;
    assignment?: Assignment;
    setShowTextModal: React.Dispatch<React.SetStateAction<boolean>>;
    setTimesListened: React.Dispatch<React.SetStateAction<number>>;
}

const RenderAudioPlayer: React.FC<Props> = ({
    audioSource, repeatableTimes, timesListened, 
    script, assignment, setShowTextModal, setTimesListened
}) => (
    <div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
        {audioSource ? (
            <>
                <div className="w-full items-start flex justify-between">
                    <div className="flex flex-col w-full gap-2">
                        <h4 className="text-xl font-semibold">Please listen to the following audio attentively.</h4>
                        <span className="text-base">
                            {(() => {
                                return repeatableTimes && repeatableTimes > 0
                                    ? `You will only be allowed to listen to the audio ${repeatableTimes - timesListened} time(s).`
                                    : "You may listen to the audio as many times as you would like.";
                            })()}
                        </span>
                    </div>
                    {!assignment && !!script && (
                        <Button
                            onClick={() => setShowTextModal(true)}
                            variant="outline"
                            color="gray"
                            className="w-full max-w-[200px]"
                        >
                            View Transcript
                        </Button>
                    )}
                </div>
                <div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
                    <AudioPlayer
                        key={v4()}
                        src={audioSource ?? ''}
                        color="listening"
                        onEnd={() => setTimesListened((prev) => prev + 1)}
                        disabled={repeatableTimes != null &&
                            timesListened === repeatableTimes}
                        disablePause
                    />
                </div>
            </>
        ) : (
            <span>This section will display the audio once it has been generated.</span>
        )}

    </div>
);

export default RenderAudioPlayer;
