import React, { useEffect, useRef, useState } from "react";
import { ConditionType, ValueCondition } from "../../../types";
import { getConditionOptions } from "../../../utils/condition-options";
import ConditionValueInput from "../inputs/ConditionValueInput";

type Props = {
	condition: ValueCondition;
	onUpdate: (updatedCondition: ValueCondition) => void;
	existingConditions: ConditionType[];
};

const ConditionRow = ({ condition, onUpdate, existingConditions }: Props) => {
	const [operator] = useState(condition.operator || "is");
	const [value, setValue] = useState(condition.conditionValue || "");
	const selectRef = useRef<HTMLSelectElement>(null);

	// Get the selected condition option to access operator_label and placeholder
	const allOptions = getConditionOptions();
	const selectedOption = allOptions.find(
		(opt) => opt.value === condition.value,
	);
	const operatorLabel = selectedOption?.operator_label || operator;
	const placeholder = selectedOption?.placeholder || "";

	useEffect(() => {
		onUpdate({
			...condition,
			operator,
			conditionValue: value,
		});
	}, [operator, value]);

	useEffect(() => {
		if (condition.conditionValue !== undefined) {
			setValue(condition.conditionValue);
		} else {
			const inputType = condition.inputType || condition.type;
			setValue(inputType === "multiselect" ? [] : "");
		}
	}, [condition.inputType, condition.type, condition.value]);

	// Ensure select stays in sync with condition.value
	useEffect(() => {
		if (selectRef.current && selectRef.current.value !== condition.value) {
			selectRef.current.value = condition.value || "";
		}
	}, [condition.value]);

	const handleValueChange = (newValue: any) => {
		setValue(newValue);
	};

	const handleFieldChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
		const selectedValue = e.target.value;
		const allOptions = getConditionOptions();
		const selectedOption = allOptions.find(
			(opt) => opt.value === selectedValue,
		);

		if (selectedOption) {
			let initialValue: any = "";
			if (selectedOption.type === "multiselect") {
				initialValue = [];
			} else {
				initialValue = "";
			}

			const updatedCondition = {
				...condition,
				value: selectedOption.value,
				label: selectedOption.label,
				inputType: selectedOption.type,
				type: condition.type || "condition",
				conditionValue: initialValue,
			};
			setValue(initialValue);
			onUpdate(updatedCondition);
		}
	};
	return (
		<div className="contentgate-condition-row flex items-start flex-1">
			<div className="contentgate-condition-only flex items-start flex-1">
				<div className="contentgate-condition-selection-section flex gap-3 flex-1 items-start flex-col md:flex-row xl:flex-col xl2:flex-row">
					<div className="contentgate-condition-field-name max-w-[160px] xs:max-w-full xl2:max-w-[190px] w-full">
						<select
							ref={selectRef}
							className="contentgate-condition-select !text-sm !border-border focus:!shadow-none focus:!outline-none focus:!border-primary hover:!text-black-450 !min-h-[38px] !max-w-[160px] xs:!max-w-full xl2:!max-w-[190px]  w-full !pl-[12px]"
							value={condition.value || ""}
							onChange={handleFieldChange}
						>
							{getConditionOptions().map((option) => (
								<option key={option.value} value={option.value}>
									{option.label}
								</option>
							))}
						</select>
					</div>
					<div className="contentgate-condition-operator mt-[10px]">
						<span>{operatorLabel}</span>
					</div>
					<div className="contentgate-condition-value flex-1! !w-full md:w-auto">
						<ConditionValueInput
							type={condition.inputType || condition.type}
							field={condition.value}
							value={value}
							operator={operator}
							onChange={handleValueChange}
							uniqueId={condition.id}
							placeholder={placeholder}
							existingConditions={existingConditions}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

export default ConditionRow;