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

import { Component, Inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';

interface LocalizedCaption {
  locale_code: string;
  caption: string;
}

@Component({
  selector: 'app-caption-dialog',
  standalone: true,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatChipsModule
  ],
  template: `
    <h2 mat-dialog-title>Manage Captions</h2>
    
    <mat-dialog-content>
      <p class="hint">Add captions for different languages. The default locale ({{ getLocaleName(data.defaultLocale) }}) is required.</p>
      
      <form [formGroup]="form">
        <div formArrayName="captions" class="captions-list">
          <div *ngFor="let caption of captions.controls; let i = index" 
               [formGroupName]="i" 
               class="caption-row">
            
            <mat-chip-listbox class="locale-chip" [disabled]="true">
              <mat-chip-option [selected]="true">
                {{ getLocaleName(caption.get('locale_code')?.value) }}
              </mat-chip-option>
            </mat-chip-listbox>
            
            <mat-form-field appearance="outline" class="caption-field">
              <mat-label>Caption</mat-label>
              <input matInput formControlName="caption" 
                     [placeholder]="'Caption in ' + getLocaleName(caption.get('locale_code')?.value)">
              <mat-error *ngIf="caption.get('caption')?.hasError('required')">
                Caption is required
              </mat-error>
            </mat-form-field>
            
            <button mat-icon-button color="warn" 
                    (click)="removeCaption(i)"
                    [disabled]="caption.get('locale_code')?.value === data.defaultLocale && captions.length === 1"
                    class="remove-button">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </div>
        
        <div class="add-section" *ngIf="availableLocales.length > 0">
          <button mat-stroked-button (click)="addCaption()">
            <mat-icon>add</mat-icon>
            Add Caption for Another Language
          </button>
          
          <mat-chip-listbox class="available-locales">
            <mat-chip-option *ngFor="let locale of availableLocales" 
                           [value]="locale"
                           (click)="addCaptionForLocale(locale)">
              {{ getLocaleName(locale) }}
            </mat-chip-option>
          </mat-chip-listbox>
        </div>
      </form>
    </mat-dialog-content>
    
    <mat-dialog-actions align="end">
      <button mat-button (click)="cancel()">Cancel</button>
      <button mat-raised-button color="primary" 
              (click)="save()"
              [disabled]="!form.valid">
        Save
      </button>
    </mat-dialog-actions>
  `,
  styles: [`
    mat-dialog-content {
      min-width: 500px;
      max-width: 600px;
    }
    
    .hint {
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
      margin-bottom: 16px;
    }
    
    .captions-list {
      margin-bottom: 24px;
    }
    
    .caption-row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 16px;
    }
    
    .locale-chip {
      flex: 0 0 120px;
      margin-top: 8px;
    }
    
    .caption-field {
      flex: 1;
    }
    
    .remove-button {
      margin-top: 8px;
    }
    
    .add-section {
      border-top: 1px solid #e0e0e0;
      padding-top: 16px;
    }
    
    .available-locales {
      margin-top: 16px;
    }
  `]
})
export default class CaptionDialogComponent implements OnInit {
  form!: FormGroup;
  availableLocales: string[] = [];

  constructor(
    private fb: FormBuilder,
    public dialogRef: MatDialogRef<CaptionDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: {
      captions: LocalizedCaption[];
      supportedLocales: string[];
      defaultLocale: string;
    }
  ) {}

  ngOnInit() {
    this.initializeForm();
    this.updateAvailableLocales();
  }

  initializeForm() {
    this.form = this.fb.group({
      captions: this.fb.array([])
    });

    // Add existing captions
    if (this.data.captions && this.data.captions.length > 0) {
      this.data.captions.forEach(caption => {
        this.addCaptionFormGroup(caption);
      });
    } else {
      // Add default locale caption if no captions exist
      this.addCaptionFormGroup({
        locale_code: this.data.defaultLocale,
        caption: ''
      });
    }
  }

  get captions() {
    return this.form.get('captions') as FormArray;
  }

  addCaptionFormGroup(caption: LocalizedCaption) {
    const group = this.fb.group({
      locale_code: [caption.locale_code, Validators.required],
      caption: [caption.caption, Validators.required]
    });
    this.captions.push(group);
  }

  addCaption() {
    if (this.availableLocales.length > 0) {
      this.addCaptionForLocale(this.availableLocales[0]);
    }
  }

  addCaptionForLocale(locale: string) {
    this.addCaptionFormGroup({
      locale_code: locale,
      caption: ''
    });
    this.updateAvailableLocales();
  }

  removeCaption(index: number) {
    this.captions.removeAt(index);
    this.updateAvailableLocales();
  }

  updateAvailableLocales() {
    const usedLocales = this.captions.controls.map(c => c.get('locale_code')?.value);
    this.availableLocales = this.data.supportedLocales.filter(
      locale => !usedLocales.includes(locale)
    );
  }

  getLocaleName(localeCode: string): string {
    const localeNames: { [key: string]: string } = {
      'tr': 'Türkçe',
      'en': 'English',
      'de': 'Deutsch',
      'fr': 'Français',
      'es': 'Español',
      'ar': 'العربية',
      'ru': 'Русский',
      'zh': '中文',
      'ja': '日本語',
      'ko': '한국어'
    };
    return localeNames[localeCode] || localeCode;
  }

  save() {
    if (this.form.valid) {
      this.dialogRef.close(this.form.value.captions);
    }
  }

  cancel() {
    this.dialogRef.close();
  }
}