import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { DeckImage, Deck, DeckService } from '../deck.service';

@Component({
  selector: 'app-move-image-modal',
  templateUrl: './move-image-modal.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule]
})
export class MoveImageModalComponent {
  @Input() image!: DeckImage;
  @Input() sourceDeck!: Deck;
  @Input() decks: Deck[] = [];
  @Output() moveCompleted = new EventEmitter<void>();
  @Output() closed = new EventEmitter<void>();

  selectedDeckId: number | null = null;

  constructor(private deckService: DeckService) { }

  moveImage(): void {
    if (this.selectedDeckId === null) {
      return;
    }

    this.deckService.moveImage(this.image.id, this.selectedDeckId).subscribe({
      next: () => {
        this.moveCompleted.emit();
        this.close();
      },
      error: (err) => {
        console.error('Error moving image:', err);
        alert('Error moving image.');
      }
    });
  }

  close(): void {
    this.closed.emit();
  }
}