"use client";

import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@mdxui/primitives";
import {
	AlignLeft,
	Calendar,
	CheckSquare,
	Circle,
	Hash,
	Link,
	Mail,
	Sliders,
	Star,
	ToggleLeft,
	Type,
} from "lucide-react";
import type * as React from "react";
import type { QuestionType } from "./types";

interface QuestionTypeSelectorProps {
	onSelect: (type: QuestionType) => void;
	children: React.ReactNode;
}

const questionTypes: {
	type: QuestionType;
	label: string;
	icon: React.ElementType;
}[] = [
	{ type: "text", label: "Short Text", icon: Type },
	{ type: "textarea", label: "Long Text", icon: AlignLeft },
	{ type: "number", label: "Number", icon: Hash },
	{ type: "email", label: "Email", icon: Mail },
	{ type: "url", label: "URL", icon: Link },
	{ type: "single-choice", label: "Single Choice", icon: Circle },
	{ type: "multiple-choice", label: "Multiple Choice", icon: CheckSquare },
	{ type: "rating", label: "Rating", icon: Star },
	{ type: "scale", label: "Scale", icon: Sliders },
	{ type: "date", label: "Date", icon: Calendar },
	{ type: "boolean", label: "Yes/No", icon: ToggleLeft },
];

export function QuestionTypeSelector({
	onSelect,
	children,
}: QuestionTypeSelectorProps) {
	return (
		<DropdownMenu>
			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
			<DropdownMenuContent align="center" className="w-56">
				{questionTypes.slice(0, 5).map(({ type, label, icon: Icon }) => (
					<DropdownMenuItem key={type} onClick={() => onSelect(type)}>
						<Icon className="mr-2 size-4" />
						{label}
					</DropdownMenuItem>
				))}
				<DropdownMenuSeparator />
				{questionTypes.slice(5).map(({ type, label, icon: Icon }) => (
					<DropdownMenuItem key={type} onClick={() => onSelect(type)}>
						<Icon className="mr-2 size-4" />
						{label}
					</DropdownMenuItem>
				))}
			</DropdownMenuContent>
		</DropdownMenu>
	);
}