import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Deck, DeckImage, DeckService } from '../deck.service';
import { PopoverService } from '../services/popover.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, private popoverService: PopoverService) {}

  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);
        this.popoverService.show({
          title: 'Error',
          message: 'Error moving image.',
        });
      },
    });
  }

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