import React from "react";
import {
	DropdownMenu as RadixDropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuTrigger,
} from "../../ui/DropdownMenu";
import { ConditionDropdownGroup, ConditionOption } from "../../../types";

type GroupedDropdownProps = {
	trigger: React.ReactNode;
	options: ConditionDropdownGroup[];
	grouped?: true;
	onSelect: (value: ConditionOption) => void;
	selectedValue?: string;
	align?: "center" | "start" | "end";
	open?: boolean;
	onOpenChange?: (open: boolean) => void;
};

type UngroupedDropdownProps = {
	trigger: React.ReactNode;
	options: (ConditionOption | { value: string; label: string })[];
	grouped?: false;
	onSelect: (
		value: ConditionOption | { value: string; label: string },
	) => void;
	selectedValue?: string;
	align?: "center" | "start" | "end";
	open?: boolean;
	onOpenChange?: (open: boolean) => void;
};

type Props = GroupedDropdownProps | UngroupedDropdownProps;

const DropdownMenu = ({
	trigger,
	options,
	grouped = false,
	onSelect,
	selectedValue,
	align = "center",
	open,
	onOpenChange,
}: Props) => {
	const renderMenuItem = (option: ConditionOption) => (
		<DropdownMenuItem
			key={option.value}
			onSelect={() => onSelect(option)}
			disabled={option.disabled}
			style={{
				fontFamily: "Inter, sans-serif",
			}}
			className={`px-[10px] py-2 rounded-[4px] min-w-[150px]
				data-[disabled]:cursor-not-allowed
				data-[disabled]:opacity-50
				data-[disabled]:pointer-events-auto
				${
					option.disabled
						? ""
						: selectedValue === option.value
							? "!bg-[#f4f4f4] !text-primary"
							: "hover:!bg-[#f9fafb] hover:!text-primary cursor-pointer"
				}
			`}
		>
			{option.label}
		</DropdownMenuItem>
	);

	return (
		<RadixDropdownMenu
			open={open}
			onOpenChange={onOpenChange}
			modal={false}
		>
			<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
			<DropdownMenuContent
				style={{ zIndex: 9999 }}
				className="rounded-[4px] p-2"
				align={align}
			>
				{grouped
					? (options as ConditionDropdownGroup[]).map(
							(group, index) => (
								<DropdownMenuGroup key={index}>
									<DropdownMenuLabel
										className="px-[10px] py-2"
										style={{
											fontFamily: "Inter, sans-serif",
										}}
									>
										{group.group}
									</DropdownMenuLabel>
									{group.options.map(renderMenuItem)}
								</DropdownMenuGroup>
							),
						)
					: (options as ConditionOption[]).map(renderMenuItem)}
			</DropdownMenuContent>
		</RadixDropdownMenu>
	);
};

export default DropdownMenu;