import { Component, model, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { form, FormValueControl, FormField } from '@angular/forms/signals';

@Component({
  selector: 'app-custom-control',
  template: `
  <button (click)="emitFormfield()">Emit array of 15000 numbers (formField)</button>
  <button (click)="emitNgModel()">Emit array of 15000 numbers (ngModel)</button>
  <br/><br/>
  <div>Duration (ngModel): {{ durationNgModel() }}ms</div>
  <div>Duration (formField): {{ durationFormField() }}ms</div>
`,
})
export class CustomControl implements FormValueControl<number[]> {
  private _numbers: number[] = Array.from({ length: 15000 }, (_, i) => i);

  public value = model<number[]>([]);
  public valueAsNgModel = model<number[]>([]);

  public durationNgModel = signal(0);
  public durationFormField = signal(0);

  public emitNgModel() {
    const startTime = performance.now();

    this.valueAsNgModel.set([...this._numbers]);

    const endTime = performance.now();
    this.durationNgModel.set(endTime - startTime);
  }

  public emitFormfield() {
    const startTime = performance.now();

    this.value.set([...this._numbers]);

    const endTime = performance.now();
    this.durationFormField.set(endTime - startTime);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CustomControl, FormField],
  template: `
    <app-custom-control [formField]="myForm.myField" [(valueAsNgModel)]="myModel" />
  `,
})
export class App {
  public myModel = signal([]);
  public myForm = form(
    signal({
      myField: [],
    })
  );
}

bootstrapApplication(App);