import { __ } from "@wordpress/i18n";
import { ChevronDown, Search } from "lucide-react";
import React, { useState } from "react";
import DropdownMenu from "./dropdowns/DropdownMenu";
import { Rule } from "../../types";

type Props = {
	search: string;
	setSearch: React.Dispatch<React.SetStateAction<string>>;
	status: { label: string; value: string };
	setStatus: React.Dispatch<
		React.SetStateAction<{ label: string; value: string }>
	>;
	statusOptions: { label: string; value: string }[];
	rules: Rule[];
};

const Filters = ({
	search,
	setSearch,
	status,
	setStatus,
	statusOptions,
	rules,
}: Props) => {
	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
		setSearch(e.target.value);
	};

	const hasActive = rules.some((rule) => rule.enabled);
	const hasInactive = rules.some((rule) => !rule.enabled);

	const hasMixedStatus = hasActive && hasInactive;

	return (
		<div className="flex gap-3 items-center">
			{rules.length > 3 && (
				<div className="relative max-w-[220px]">
					<Search className="text-[#4E4E4E] w-4 h-4 absolute top-1/2 left-3 -translate-y-1/2" />
					<input
						type="text"
						name="content-rules-search-input"
						className="contentgate-input w-full !border-border focus:!shadow-none focus:!outline-none focus:!border-primary !min-h-[38px] !pl-9 !pr-3 rounded-[4px] text-sm"
						placeholder={__("Search Rules", "contentgate")}
						value={search}
						onChange={handleSearch}
					/>
				</div>
			)}

			{hasMixedStatus && (
				<div className="max-w-[140px]">
					<DropdownMenu
						trigger={
							<button
								type="button"
								className="text-sm flex items-center gap-[10px] focus:outline-none bg-white text-[#383838] h-[38px] px-3 border border-border rounded-[4px]"
							>
								<span className="contentgate-dropdown-button-text">
									{status.label}
								</span>
								<span>
									<ChevronDown size={14} />
								</span>
							</button>
						}
						options={statusOptions}
						grouped={false}
						onSelect={(status) => setStatus(status)}
						selectedValue={status.value}
						align="end"
					/>
				</div>
			)}
		</div>
	);
};

export default Filters;