import { useState } from "react";

type ConditionDefinition = {
  typ: "MATH" | "BOOLEAN" | "STRING";
  signalNames: string;
  function: "ALL" | "ANY" | "AVG" | "MAX_DIFF_TO_MEAN";
  comparisonValue: string;
  mathOperator:
    | "EQUAL"
    | "NOT_EQUAL"
    | "LESS_THAN"
    | "LESS_THAN_OR_EQUAL"
    | "GREATER_THAN"
    | "GREATER_THAN_OR_EQUAL";
};

export default function ConditionForm({
  condition,
  onChange,
}: {
  condition: ConditionDefinition;
  onChange: (updatedCondition: ConditionDefinition) => void;
}) {
  const [localCondition, setLocalCondition] = useState(condition);

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
    const updated = { ...localCondition, [e.target.name]: e.target.value };
    setLocalCondition(updated);
    onChange(updated);
  };

  return (
    <div className="p-4 border rounded bg-white shadow-md">
      <h3 className="font-bold">Condition</h3>
      <label className="block">
        Type:
        <select name="typ" value={localCondition.typ} onChange={handleChange} className="block w-full border p-2 rounded">
          {["MATH", "BOOLEAN", "STRING"].map((type) => (
            <option key={type} value={type}>{type}</option>
          ))}
        </select>
      </label>

      <label className="block">
        Signal Names:
        <input type="text" name="signalNames" value={localCondition.signalNames} onChange={handleChange} className="block w-full border p-2 rounded" />
      </label>

      <label className="block">
        Function:
        <select name="function" value={localCondition.function} onChange={handleChange} className="block w-full border p-2 rounded">
          {["ALL", "ANY", "AVG", "MAX_DIFF_TO_MEAN"].map((func) => (
            <option key={func} value={func}>{func}</option>
          ))}
        </select>
      </label>

      <label className="block">
        Comparison Value:
        <input type="text" name="comparisonValue" value={localCondition.comparisonValue} onChange={handleChange} className="block w-full border p-2 rounded" />
      </label>

      <label className="block">
        Math Operator:
        <select name="mathOperator" value={localCondition.mathOperator} onChange={handleChange} className="block w-full border p-2 rounded">
          {["EQUAL", "NOT_EQUAL", "LESS_THAN", "LESS_THAN_OR_EQUAL", "GREATER_THAN", "GREATER_THAN_OR_EQUAL"].map((op) => (
            <option key={op} value={op}>{op}</option>
          ))}
        </select>
      </label>
    </div>
  );
}