import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import {
  ListMessage,
  MessageConfiguration,
  MessageTypeEnum,
  ObjectMessage,
  ProtoMessage,
} from '../../model/proto-message.model';
import { DefinitionEditorFieldComponent } from './definition-editor-field/definition-editor-field.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-definition-editor',
  imports: [
    FormsModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    DefinitionEditorFieldComponent,
  ],
  template: `
    <h2 mat-dialog-title>{{ protoMessage.name }}</h2>
    <mat-dialog-content>
      @for (field of editableMessages; track $index) {
      <h3>{{ field.name }}</h3>
      <mat-form-field>
        <mat-label>Friendly Name</mat-label>
        <input
          matInput
          [(ngModel)]="field.friendlyName"
          placeholder="Optional"
        />
      </mat-form-field>
      <app-definition-editor-field
        [fieldConfiguration]="field.configuration"
      ></app-definition-editor-field>
      }
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button mat-dialog-close>Close</button>
    </mat-dialog-actions>
  `,
  styleUrl: './definition-editor.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DefinitionEditorComponent {
  protected protoMessage = inject<ProtoMessage>(MAT_DIALOG_DATA);

  protected editableMessages = this.protoMessage.values;
}