import {Component, effect, signal} from '@angular/core';
import {FormField, form} from '@angular/forms/signals';

@Component({
  selector: 'app-root',
  imports: [FormField],
  template: `
    <input [formField]="field" placeholder="Type 'hello ' with a space" />
    <p>Local Signal (Input Buffer): "{{ text() }}"</p>
    <p>Normalized Model (Trimmed): "{{ model() }}"</p>
  `,
})
export class App {
  // 1. Local signal bound to the input
  text = signal<string>('');

  // 2. The FormField directive from @angular/forms/signals
  field = form(this.text);

  // 3. The "normalized" model or external state
  model = signal<string>('');

  constructor() {
    // Effect A: Sync Local -> Model (Trimming)
    // When the user types, trim the input and update the model.
    effect(() => {
      const currentText = this.text();
      const trimmed = currentText.trim();

      if (this.model() !== trimmed) {
        this.model.set(trimmed);
      }
    });

    // Effect B: Sync Model -> Local
    // DEPENDENCY TRAP: This effect reads 'text()', meaning it runs on every keystroke.
    effect(() => {
      const currentModel = this.model();

      // Reading this.text() makes this effect dependent on the 'text' signal.
      if (this.text() !== currentModel) {
        // --- 🔴 THE REGRESSION POINT ---
        // In the culprit Angular version, calling text.set() here eagerly
        // overwrote the DOM buffer, swallowing the space the user just typed.
        this.text.set(currentModel);
      }
    });
  }
}