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

@Component({
  selector: 'spellcard',
  templateUrl: './spellcard.component.html',
  styleUrl: './spellcard.component.scss',
})
export class SpellcardComponent {
  @Input() public spell!: Spell;
  public schools: any;
  public backgroundColors: any = {
    Abjuration: '#F0E3CE', //final
    Conjuration: '#26714a', //final
    Divination: '#F0E3CE', //final
    Enchantment: '#629179', //final
    Evocation: '#a46a7d',
    Illusion: '#69a', //final
    Necromancy: '#000000', //final
    Transmutation: '#69a', //final
  };

  public borders: any = {
    Abjuration: '0 0 0 2px #171314, 0 0 0 5px #FFFFFF',
    Conjuration: '0 0 0 2px #171314, 0 0 0 5px #26714a', //final
    Divination: '0 0 0 2px #171314, 0 0 0 5px #FFFFFF',
    Enchantment: '0 0 0 2px #171314, 0 0 0 5px #26714a', //final
    Evocation: '0 0 0 2px #171314, 0 0 0 5px #863f57',
    Illusion: '0 0 0 2px #171314, 0 0 0 5px #2d6475', //final
    Necromancy: '0 0 0 2px #171314, 0 0 0 5px #36353a', //final
    Transmutation: '0 0 0 2px #171314, 0 0 0 5px #2d6475', //final
  };

  public constructor(public translator: TranslatorService) {
    this.schools = translator.schools;
  }

  public setBackupImage(event: any): void {
    event.target.src = 'assets/images/spells/backup.jpg';
  }
}
