// src/app/deck.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, Observable, switchMap } from 'rxjs';

export interface Deck {
  id: number; // Hinzugefügt
  name: string;
  images: DeckImage[];
}

export interface DeckImage {
  boxes: Box[];
  name: string;
}
export interface Box {
  x1:number;
  x2:number;
  y1:number;
  y2:number;
}

export interface BackendBox {
  bildname: string;
  deckid: number;
  iconindex: number;
  id: number;
  x1: number;
  x2: number;
  y1: number;
  y2: number;
}
@Injectable({
  providedIn: 'root'
})
export class DeckService {
  private apiUrl = '/api/decks';

  constructor(private http: HttpClient) { }

  getDecks(): Observable<Deck[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map(decks => decks.map(deck => ({
        id: deck.id, // Annahme: Jeder Deck hat eine eindeutige ID
        name: deck.name,
        images: this.groupImagesByName(deck.images)
      })))
    );
  }
  private groupImagesByName(images: any[]): DeckImage[] {
    const imageMap: { [key: string]: DeckImage } = {};

    images.forEach(image => {
      if (!imageMap[image.name]) {
        imageMap[image.name] = {
          name: image.name,
          boxes: []
        };
      }
      imageMap[image.name].boxes.push({
        x1: image.x1,
        x2: image.x2,
        y1: image.y1,
        y2: image.y2
      });
    });

    return Object.values(imageMap);
  }
  getDeck(deckname:string): Observable<Deck> {
    return this.http.get<Deck>(`${this.apiUrl}/${deckname}/images`);
  }
  getImage(name: string): Observable<DeckImage> {
    return this.http.get<BackendBox[]>(`${this.apiUrl}/image/${name}`).pipe(
      map(response => {
        if (response.length === 0) {
          // Falls keine Daten zurückgegeben werden, ein leeres DeckImage zurückgeben
          return { name: name, boxes: [] };
        }

        // Extrahiere den Bildnamen aus dem ersten Element des Arrays
        const imageName = response[0].bildname;

        // Mape die Backend-Daten auf das Box-Interface
        const boxes: Box[] = response.map(item => ({
          x1: item.x1,
          x2: item.x2,
          y1: item.y1,
          y2: item.y2
        }));

        return {
          name: imageName,
          boxes: boxes
        };
      })
    );
  }
  createDeck(deckname: string): Observable<any> {
    return this.http.post(this.apiUrl, { deckname });
  }

  deleteDeck(deckName: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${encodeURIComponent(deckName)}`);
  }

  saveImageData(data:any): Observable<any> {
    return this.http.post(`${this.apiUrl}/image`, data);
  }
  
  // Neue Methode zum Löschen eines Bildes
  deleteImage(imageName: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/image/${imageName}`);
  }
}