import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AngularMaterialModule } from '../../shared/module/angular-material.module';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-contact-dialog',
  imports: [AngularMaterialModule, CommonModule, FormsModule],
  template: `
    <h2 mat-dialog-title>Select Contact</h2>
    <mat-dialog-content>
      <mat-radio-group [(ngModel)]="selectedContact">
        <mat-radio-button *ngFor="let contact of contacts" [value]="contact">
          {{getContactLabel(contact)}}
        </mat-radio-button>
      </mat-radio-group>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="onCancel()">Cancel</button>
      <button mat-raised-button color="primary" (click)="onSelect()" [disabled]="!selectedContact">
        Select
      </button>
    </mat-dialog-actions>
  `,
  styles: [`
     mat-radio-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    mat-radio-button {
      margin: 4px 0;
    }
  `]
})
export class ContactDialogComponent {
  selectedContact: any | null = null;

  constructor(
    public dialogRef: MatDialogRef<ContactDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { contacts: any[] }
  ) { }

  get contacts() {
    return this.data.contacts;
  }

  onSelect(): void {
    this.dialogRef.close(this.selectedContact);
  }

  onCancel(): void {
    this.dialogRef.close();
  }

  getContactLabel(contact: any): string {
    return `${contact.firstName} ${contact.middleInitial} ${contact.lastName}, 
      ${contact.email}, ${contact.phone}`;
  }
}