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

@Component({
  selector: 'custom-spells-modal',
  templateUrl: './custom-spells-modal.component.html',
  styleUrl: './custom-spells-modal.component.scss',
})
export class CustomSpellsModalComponent {
  @Input() public spells: Spell[] = [];
  public indexList: number[] = [];

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

  public toggleSpellSelection(index: number): void {
    if (this.indexList.includes(index)) {
      this.indexList = this.indexList.filter((i) => i !== index);
    } else {
      this.indexList.push(index);
    }
  }

  public delete(): void {
    const deletionList: Spell[] = [];
    this.indexList.forEach((index) => deletionList.push(this.spells[index]));
    this.modalAccessor.handleModalClosing('delete', deletionList);
    this.indexList = [];
  }

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