import React from "react";
import { __ } from "@wordpress/i18n";
import { getConditionOptions } from "../../../utils/condition-options";
import { ConditionOption, ConditionType } from "../../../types";
import DropdownMenu from "./DropdownMenu";

type Props = {
	trigger: React.ReactNode;
	onSelect: (value: ConditionOption) => void;
	existingConditions: ConditionType[];
	open?: boolean;
	onOpenChange?: (open: boolean) => void;
};

// Group options by category
const groupOptions = (options: ConditionOption[]) => {
	const groups = {
		"User Based": [] as ConditionOption[],
		"User Assets Based": [] as ConditionOption[],
		Others: [] as ConditionOption[],
	};

	options.forEach((option) => {
		if (
			[
				"roles",
				"user_state",
				"user_registered_date",
				"access_period",
			].includes(option.value)
		) {
			groups["User Based"].push(option);
		} else if (["email_domain", "post_count"].includes(option.value)) {
			groups["User Assets Based"].push(option);
		} else {
			groups["Others"].push(option);
		}
	});

	// Convert to array format and filter out empty groups
	return Object.entries(groups)
		.filter(([group, opts]) => opts.length > 0)
		.map(([group, opts]) => ({
			group: __(group, "contentgate"),
			options: opts,
		}));
};

const ConditionFieldDropdown = ({
	trigger,
	onSelect,
	existingConditions,
	open,
	onOpenChange,
}: Props) => {
	const conditionOptions = getConditionOptions();

	// Check if a login status condition already exists
	const isLoginStatusExists = (optionValue: string): boolean => {
		if (optionValue !== "user_state") return false;

		return existingConditions.some(
			(condition) =>
				(condition.type === "condition" &&
					condition.value === "user_state") ||
				(condition.type === "group" &&
					condition.group?.conditions?.some(
						(c: any) => c.type === "user_state",
					)),
		);
	};
	// Map options with disabled state
	const allOptions = conditionOptions.map((option: ConditionOption) => ({
		...option,
		disabled: isLoginStatusExists(option.value),
	}));

	const options = groupOptions(allOptions);

	return (
		<DropdownMenu
			trigger={trigger}
			options={options}
			grouped={true}
			onSelect={onSelect}
			align="start"
			open={open}
			onOpenChange={onOpenChange}
		/>
	);
};

export default ConditionFieldDropdown;