import React from "react";
import DropdownMenu from "./DropdownMenu";
import { ConditionOption, ContentTarget } from "../../../types";
import { getContentGateData, isProAccess } from "../../../utils/localized-data";
import { __ } from "@wordpress/i18n";

type Props = {
	trigger: React.ReactNode;
	onSelect: (option: { value: string; label: string }) => void;
	existingContentTypes: ContentTarget[];
};

const ContentTypeDropdown = ({
	trigger,
	onSelect,
	existingContentTypes,
}: Props) => {
	// Get content type options from localized data
	const allOptions = getContentGateData("content_type_options", [
		{ value: "pages", label: __("Pages", "contentgate") },
		{ value: "posts", label: __("Posts", "contentgate") },
		{
			value: "whole_site",
			label: __("Whole Site", "contentgate"),
		},
		...(isProAccess()
			? [
					{
						value: "post_types",
						label: __("Post Type", "user-registration"),
					},
					{
						value: "taxonomy",
						label: __("Taxonomy", "user-registration"),
					},
				]
			: []),
	]);

	let filteredOptions = isProAccess()
		? allOptions
		: allOptions.filter(
				(option: { value: string; label: string }) =>
					option.value === "posts" ||
					option.value === "pages" ||
					option.value === "whole_site",
			);

	// Check if a content type already exists
	const isContentTypeExists = (contentType: string) => {
		return existingContentTypes.some(
			(target) => target.type === contentType,
		);
	};

	// Map options with disabled state
	const options = filteredOptions.map(
		(option: { value: string; label: string }) => ({
			...option,
			disabled: isContentTypeExists(option.value),
		}),
	);

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

export default ContentTypeDropdown;