import { MatchSentenceExerciseOption, MatchSentenceExerciseSentence } from "@/interfaces/exam";
import { useDraggable, useDroppable } from "@dnd-kit/core";
import clsx from "clsx";

interface DroppableQuestionAreaProps { 
    question: MatchSentenceExerciseSentence; 
    answer?: string 
}

const DroppableQuestionArea: React.FC<DroppableQuestionAreaProps> = ({ question, answer }) => {
	const { isOver, setNodeRef } = useDroppable({ id: `droppable_sentence_${question.id}` });

	return (
		<div className="grid grid-cols-3 gap-4" ref={setNodeRef}>
			<div className="flex items-center gap-3 cursor-pointer col-span-2">
				<button
					className={clsx(
						"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple p-2 rounded-full z-10",
						"transition duration-300 ease-in-out",
					)}>
					{question.id}
				</button>
				<span>{question.sentence}</span>
			</div>
			<div
				key={`answer_${question.id}_${answer}`}
				className={clsx("w-48 h-10 border-2 border-mti-purple-light self-center rounded-xl flex items-center justify-center", isOver && "border-mti-purple-dark")}>
				{answer && `Paragraph ${answer}`}
			</div>
		</div>
	);
}

const DraggableOptionArea: React.FC<{ option: MatchSentenceExerciseOption }> = ({ option }) => {
	const { attributes, listeners, setNodeRef, transform } = useDraggable({
		id: `draggable_option_${option.id}`,
	});

	const style = transform
		? {
			transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
			zIndex: 99,
		}
		: undefined;

	return (
		<div className={clsx("flex items-center justify-start gap-6 cursor-pointer")} ref={setNodeRef} style={style} {...listeners} {...attributes}>
			<button
				id={`option_${option.id}`}
				// onClick={() => selectOption(id)}
				className={clsx(
					"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple px-3 py-2 rounded-full z-10",
					"transition duration-300 ease-in-out",
					option.id,
				)}>
				Paragraph {option.id}
			</button>
		</div>
	);
}

export {
	DroppableQuestionArea,
	DraggableOptionArea,
}