import { CommonModule } from '@angular/common';
import { AfterViewInit, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Modal } from 'flowbite';
import { DeckService } from '../services/deck.service';
import { PopoverService } from '../services/popover.service';

@Component({
  selector: 'app-create-deck-modal',
  templateUrl: './create-deck-modal.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule],
})
export class CreateDeckModalComponent implements AfterViewInit {
  @Output() deckCreated = new EventEmitter<void>();
  @ViewChild('createDeckModal') modalElement!: ElementRef;
  deckName: string = '';
  modal!: Modal;

  constructor(private deckService: DeckService, private popoverService: PopoverService) {}

  ngAfterViewInit(): void {
    this.modal = new Modal(this.modalElement.nativeElement);
  }

  open(): void {
    this.modal.show();
  }

  createDeck(event: Event): void {
    event.preventDefault();
    if (this.deckName.trim() === '') {
      this.popoverService.show({
        title: 'Information',
        message: 'Please enter a deck name !',
      });
      return;
    }

    this.deckService.createDeck(this.deckName).subscribe({
      next: () => {
        this.deckName = '';
        this.deckCreated.emit();
        this.modal.hide();
      },
      error: err => {
        console.error('Error creating deck', err);
        this.popoverService.show({
          title: 'Error',
          message: 'Error creating deck.',
        });
      },
    });
  }

  closeModal(): void {
    this.modal.hide();
  }
}