import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  OnInit,
  forwardRef,
  input,
  model,
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { ListMessage } from '../../model/proto-message.model';
import { ProtoFieldComponent } from '../proto-field/proto-field.component';

@Component({
  selector: 'app-list-field',
  imports: [
    MatButtonModule,
    MatIconModule,
    forwardRef(() => ProtoFieldComponent),
  ],
  template: `<h3>{{ label() }}</h3>
    @if(values()) { @for(value of values(); track $index) {
    <div class="row-wrapper">
      <app-proto-field
        [configuration]="configuration().subConfiguration"
        [value]="value"
        (valueChange)="updateValue($index, $event)"
      ></app-proto-field>
      <button mat-icon-button (click)="remove($index)">
        <mat-icon>remove</mat-icon>
      </button>
    </div>
    } }
    <button mat-icon-button class="add-button" (click)="add()">
      <mat-icon>add</mat-icon>
    </button>`,
  styleUrl: './list-field.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ListFieldComponent {
  label = input<string>();
  configuration = input.required<ListMessage>();
  values = model<any[]>();

  add() {
    const existingValues = this.values();
    if (existingValues) {
      const newValues = [...existingValues];
      newValues.push(undefined);
      this.values.set(newValues);
    } else {
      this.values.set([undefined]);
    }
  }

  remove(index: number) {
    const newValues = [...this.values()!];
    newValues.splice(index, 1);
    this.values.set(newValues);
  }

  updateValue(index: number, value: any) {
    let existing = [...this.values()!];
    existing[index] = value;
    this.values.set(existing);
  }
}