import Image from "next/image";
import { useRef, useState } from "react";
import { motion } from "framer-motion";

export default function DraggableComponentsContainer({
	content,
}: {
	content: { context: string }[] | undefined;
}) {
	if (content === undefined) return null;
	return (
		<div className="flex flex-col gap-10">
			{content.map((i) => {
				return <DraggableComponents content={i.context} />;
			})}
		</div>
	);
}

function DraggableComponents({ content }: { content: string }) {
	const [isDragging, setIsDragging] = useState(false);
	const containerRef = useRef<HTMLDivElement>(null);

	const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
		setIsDragging(true);
		if (containerRef.current) {
			// Serialize the children as a string for dataTransfer
			const childrenHtml = containerRef.current.innerHTML;
			event.dataTransfer.setData("text/html", childrenHtml);
		}
	};

	const handleDragEnd = () => {
		setIsDragging(false);
	};

	return (
		<motion.div
			initial={{ opacity: 0, y: 5 }}
			animate={{ opacity: 1, y: 0 }}
			ref={containerRef}
			onDragEnd={handleDragEnd}
			// @ts-expect-error TODO: fix this
			onDragStart={handleDragStart}
			draggable
			className={`flex gap-4 px-3 overflow-hidden rounded-md text-[#989EA4] border-2 transition ${isDragging ? "border-blue-600" : "border-[#1F2428]"}`}
		>
			<div className="flex flex-col gap-2">
				<div>
					<h1 className="line-clamp-3">{content}</h1>
				</div>
				{/* <p className="line-clamp-1 text-[#369DFD]">{extraInfo}</p> */}
			</div>
		</motion.div>
	);
}