import styles from "@/features/predictions/styles/predictions.module.css";
import type { FieldRendererProps } from "./types";

export function NumberFieldRenderer({ card, draftValues, disabled, setNumber }: FieldRendererProps) {
  return (
    <div className={styles.fieldGrid}>
      {card.fields.map((field) => {
        const draft = draftValues.find((value) => value.fieldId === field.id);
        const step = field.stepNumber ?? 0.01;

        return (
          <div key={field.id} className="field">
            <div className={styles.numberInputRow}>
              <input
                id={`field-${field.id}`}
                type="number"
                min={field.minNumber ?? undefined}
                max={field.maxNumber ?? undefined}
                step={step}
                value={draft?.valueNumber ?? ""}
                disabled={disabled}
                placeholder="..."
                onChange={(event) => {
                  const raw = event.target.value;
                  if (raw.trim() === "") {
                    setNumber(field.id, null);
                    return;
                  }
                  const next = Number(raw);
                  if (Number.isNaN(next)) {
                    return;
                  }
                  setNumber(field.id, next);
                }}
              />
              {card.unit ? <span className={styles.numberUnit}>{card.unit}</span> : null}
            </div>
          </div>
        );
      })}
    </div>
  );
}
