import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DataService } from 'src/services/data/data.service';
import { TranslatorService } from 'src/services/translator/translator.service';

@Component({
  selector: 'character-card',
  templateUrl: './character-card.component.html',
  styleUrls: ['./character-card.component.scss'],
})
export class CharacterCardComponent {
  @Input() character: string = '';
  @Output() delete: EventEmitter<string> = new EventEmitter<string>();
  @Output() select: EventEmitter<string> = new EventEmitter<string>();
  public characterData: any = {};
  public image: any;
  public races: any;
  public classes: any;

  constructor(
    private dataAccessor: DataService,
    private translator: TranslatorService
  ) {}

  ngOnInit() {
    this.races = this.translator.races;
    this.classes = this.translator.classes;
    this.dataAccessor
      .getData(this.character, 'characterData')
      .then((characterData: any) => {
        this.characterData = characterData;
      });
    this.dataAccessor.getData(this.character, 'image').then((image: any) => {
      this.image = image.value;
    });
  }

  public deleteCharacter(): void {
    this.delete.emit();
  }

  public selectCharacter(): void {
    this.select.emit();
  }
}