vokabeltraining/src/app/deck-list.component.ts

// src/app/deck-list.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { DeckService, Deck, DeckImage } from './deck.service';
import { CommonModule } from '@angular/common';
import { CreateDeckModalComponent } from './create-deck-modal/create-deck-modal.component';
import { TrainingComponent } from './training/training.component';
import { UploadImageModalComponent } from './upload-image-modal/upload-image-modal.component';
import { EditImageModalComponent } from './edit-image-modal/edit-image-modal.component';
import { firstValueFrom } from 'rxjs';
import { MoveImageModalComponent } from './move-image-modal/move-image-modal.component';

@Component({
  selector: 'app-deck-list',
  templateUrl: './deck-list.component.html',
  standalone: true,
  imports: [
    CommonModule,
    CreateDeckModalComponent,
    UploadImageModalComponent,
    TrainingComponent,
    EditImageModalComponent,
    MoveImageModalComponent, // Hinzufügen der neuen Komponente
    UploadImageModalComponent
  ]
})
export class DeckListComponent implements OnInit {
  decks: Deck[] = [];
  selectedDeck: Deck | null = null;

  @ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent;
  @ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent;
  @ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent;
  @ViewChild(UploadImageModalComponent) uploadModal!: UploadImageModalComponent;

  imageData: { imageSrc: string | ArrayBuffer | null, deckImage: DeckImage } | null = null;

  currentUploadDeckName: string = '';

  // Set zur Verfolgung erweiterter Decks
  expandedDecks: Set<string> = new Set<string>();

  // State für das Verschieben von Bildern
  imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;

  constructor(private deckService: DeckService) { }

  ngOnInit(): void {
    this.loadExpandedDecks();
    this.loadDecks();
  }

  loadDecks(): void {
    this.deckService.getDecks().subscribe({
      next: (data) => this.decks = data,
      error: (err) => console.error('Fehler beim Laden der Decks', err)
    });
  }

  deleteDeck(deckName: string): void {
    if (!confirm(`Bist du sicher, dass du das Deck "${deckName}" löschen möchtest?`)) {
      return;
    }
    this.deckService.deleteDeck(deckName).subscribe({
      next: () => this.loadDecks(),
      error: (err) => console.error('Fehler beim Löschen des Decks', err)
    });
  }

  deleteImage(deck: Deck, image: DeckImage): void {
    if (!confirm(`Bist du sicher, dass du das Bild "${image.name}" löschen möchtest?`)) {
      return;
    }

    const imageId = image.id; 

    this.deckService.deleteImage(imageId).subscribe({
      next: () => this.loadDecks(),
      error: (err) => console.error('Fehler beim Löschen des Bildes', err)
    });
  }
  
  editImage(deck: Deck, image: DeckImage): void {
    let imageSrc = null
    this.currentUploadDeckName = deck.name;
    fetch(`/api/debug_image/${image.id}/original_compressed.jpg`)
    .then(response => {
      if (!response.ok) {
        throw new Error('Netzwerkantwort war nicht ok');
      }
      return response.blob();
    })
    .then(blob => {
      const reader = new FileReader();
      reader.onloadend = () => {
        imageSrc = reader.result; // Base64-String
        this.imageData = { imageSrc, deckImage: image }
      };
      reader.readAsDataURL(blob);
    })
    .catch(error => {
      console.error('Fehler beim Laden des Bildes:', error);
    });        
  }
  
  openTraining(deck: Deck): void {
    this.selectedDeck = deck;
  }

  closeTraining(): void {
    this.selectedDeck = null;
    this.loadDecks();
  }

  openCreateDeckModal(): void {
    this.createDeckModal.open();
  }

  openUploadImageModal(deckName: string): void {
    this.currentUploadDeckName = deckName;
    this.uploadImageModal.deckName = deckName;
    this.uploadImageModal.open();
  }

  // Methode zum Umschalten der Deck-Erweiterung
  toggleDeckExpansion(deckName: string): void {
    if (this.expandedDecks.has(deckName)) {
      this.expandedDecks.delete(deckName);
    } else {
      this.expandedDecks.add(deckName);
    }
    this.saveExpandedDecks();
  }

  // Methode zur Überprüfung, ob ein Deck erweitert ist
  isDeckExpanded(deckName: string): boolean {
    return this.expandedDecks.has(deckName);
  }

  // Laden der erweiterten Decks aus dem sessionStorage
  loadExpandedDecks(): void {
    const stored = sessionStorage.getItem('expandedDecks');
    if (stored) {
      try {
        const parsed: string[] = JSON.parse(stored);
        this.expandedDecks = new Set<string>(parsed);
      } catch (e) {
        console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
      }
    } else {
      // Wenn keine Daten gespeichert sind, alle Decks standardmäßig nicht erweitern
      this.expandedDecks = new Set<string>();
    }
  }

  // Speichern der erweiterten Decks in das sessionStorage
  saveExpandedDecks(): void {
    const expandedArray = Array.from(this.expandedDecks);
    sessionStorage.setItem('expandedDecks', JSON.stringify(expandedArray));
  }

  // Funktion zum Öffnen des Upload Modals (kann durch einen Button ausgelöst werden)
  openUploadModal(): void {
    this.uploadImageModal.open();
  }

  // Handler für das imageUploaded Event
  onImageUploaded(imageData: any): void {
    this.imageData = imageData;
  }

  onClosed(){
    this.imageData = null;
  }

  async onImageSaved() {
    // Handle das Speichern der Bilddaten, z.B. aktualisiere die Liste der Bilder
    this.imageData = null;
    this.decks = await firstValueFrom(this.deckService.getDecks())
  }

  // Methode zum Öffnen des MoveImageModal
  openMoveImageModal(deck: Deck, image: DeckImage): void {
    this.imageToMove = { image, sourceDeck: deck };
  }

  // Handler für das moveCompleted Event
  onImageMoved(): void {
    this.imageToMove = null;
    this.loadDecks();
  }
}