flare-ui/src/app/dialogs/confirm-dialog/confirm-dialog.component.ts

import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

export interface ConfirmDialogData {
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  confirmColor?: 'primary' | 'accent' | 'warn';
  showVersionSelect?: boolean;
  versions?: any[];
  showDropdown?: boolean;
  dropdownOptions?: Array<{value: any, label: string}>;
  dropdownPlaceholder?: string;
}

@Component({
  selector: 'app-confirm-dialog',
  standalone: true,
  imports: [
    CommonModule, 
    FormsModule,
    MatDialogModule, 
    MatButtonModule,
    MatSelectModule,
    MatFormFieldModule
  ],
  template: `
    <h2 mat-dialog-title>{{ data.title }}</h2>
    <mat-dialog-content>
      <p>{{ data.message }}</p>
      
      @if (data.showVersionSelect && data.versions) {
        <mat-form-field appearance="outline" class="full-width">
          <mat-label>Select Source Version</mat-label>
          <mat-select [(ngModel)]="selectedVersionId" required>
            @for (version of data.versions; track version.id) {
              <mat-option [value]="version.id">
                Version {{ version.id }} - {{ version.caption }}
                @if (version.published) {
                  <span class="published-badge">(Published)</span>
                }
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      }
      
      @if (data.showDropdown && data.dropdownOptions) {
        <mat-form-field appearance="outline" class="full-width">
          <mat-label>{{ data.dropdownPlaceholder || 'Select an option' }}</mat-label>
          <mat-select [(ngModel)]="selectedValue">
            @for (option of data.dropdownOptions; track option.value) {
              <mat-option [value]="option.value">
                {{ option.label }}
              </mat-option>
            }
          </mat-select>
        </mat-form-field>
      }
      
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">{{ data.cancelText || 'Cancel' }}</button>
      <button mat-raised-button 
              [color]="data.confirmColor || 'primary'" 
              (click)="onConfirm()"
              [disabled]="(data.showVersionSelect && !selectedVersionId) || (data.showDropdown === true && selectedValue === undefined)">
        {{ data.confirmText || 'Confirm' }}
      </button>
    </mat-dialog-actions>
  `,
  styles: [`
    mat-dialog-content {
      padding: 20px 24px;
      min-width: 400px;
    }
    
    p {
      margin: 0 0 16px 0;
      color: rgba(0,0,0,0.87);
      line-height: 1.5;
    }
    
    .full-width {
      width: 100%;
    }
    
    .published-badge {
      color: #4caf50;
      font-weight: 500;
      margin-left: 8px;
    }
    
    mat-dialog-actions {
      padding: 16px 24px;
    }
  `]
})
export default class ConfirmDialogComponent {
  selectedVersionId: number | null = null;
  selectedValue: any = undefined;

  constructor(
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData
  ) {
    // Pre-select first version if available
    if (data.showVersionSelect && data.versions && data.versions.length > 0) {
      this.selectedVersionId = data.versions[0].id;
    }
    
    // Dropdown için başlangıç değeri undefined olsun (seçim yapılmamış)
    if (data.showDropdown) {
      this.selectedValue = undefined;
    }
  }

  onConfirm(): void {
    if (this.data.showVersionSelect) {
      this.dialogRef.close(this.selectedVersionId);
    } else if (this.data.showDropdown) {
      this.dialogRef.close({ confirmed: true, selectedValue: this.selectedValue });
    } else {
      this.dialogRef.close(true);
    }
  }

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