import { Component, Input } from '@angular/core';
import { Spell } from 'src/interfaces/spell';
import { ModalService } from 'src/services/modal/modal.service';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-favorite-spells-modal',
  templateUrl: './favorite-spells-modal.component.html',
  styleUrl: './favorite-spells-modal.component.scss',
})
export class FavoriteSpellsModalComponent {
  @Input() public preparedSpells: Spell[] = [];
  @Input() public selectedSpells: Spell[] = [];
  @Input() public spellAttackBonus: string = '0';
  @Input() public spellSaveDC: number = 0;

  checkedSpells: boolean[] = [];

  public constructor(
    private modalAccessor: ModalService,
    public translate: TranslateService,
  ) {}

  public ngOnInit(): void {
    this.checkedSpells = Array(this.preparedSpells.length).fill(false);
    this.preparedSpells.forEach((spell, index) => {
      this.checkedSpells[index] = this.selectedSpells.some(
        (selectedSpell) => selectedSpell.id === spell.id,
      );
    });
  }

  public update(): void {
    const spells: Spell[] = this.preparedSpells.filter(
      (spell, index) => this.checkedSpells[index],
    );
    this.modalAccessor.handleModalClosing('update', spells);
    this.checkedSpells = [];
  }

  public cancel(): void {
    this.modalAccessor.handleModalClosing('cancel', undefined);
    this.checkedSpells = [];
  }
}