import {
  Component,
  inject,
  QueryList,
  TemplateRef,
  ViewChildren,
  ViewChild,
} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { DataService } from 'src/services/data/data.service';
import { Router } from '@angular/router';
import { CharacterCardComponent } from './character-card/character-card.component';

@Component({
  selector: 'app-character-picker',
  templateUrl: './character-picker.component.html',
  styleUrls: ['./character-picker.component.scss'],
})
export class CharacterPickerComponent {
  public characters: any[] = [];
  public currentCharacter: string = '';
  private modalService = inject(NgbModal);

  @ViewChildren(CharacterCardComponent)
  characterCards!: QueryList<CharacterCardComponent>;

  @ViewChild('warning') warning!: TemplateRef<any>;

  // @ViewChildren(warning) warning!: TemplateRef<any>;
  public constructor(
    public dataService: DataService,
    private Router: Router,
  ) {
    this.dataService.dataLoaded = false;
    this.dataService.getCollection('characters').then((characters: any) => {
      this.characters = characters;
    });
  }

  ngAfterViewInit() {
    this.showWarning(this.warning);
  }

  public addCharacter() {
    this.Router.navigate(['character/creator']);
  }

  open(content: TemplateRef<any>, index: number) {
    this.currentCharacter = this.characters[index].name;
    this.modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        (result) => {},
        (reason) => {
          if (reason == 'delete') {
            this.deleteCharacter(index);
          }
        },
      );
  }

  public deleteCharacter(index: number) {
    this.characters.splice(index, 1);
    this.dataService.deleteCollection(this.currentCharacter);
    this.dataService.deleteCollection('characters');
    setTimeout(() => {
      this.dataService.setCollection('characters', this.characters);
    }, 200);
    setTimeout(() => {
      this.characterCards.forEach((card) => {
        card.loadCharacterData();
      });
    }, 500);
  }

  public selectCharacter(character: any) {
    console.log(character);
    sessionStorage.setItem('characterName', character.name);
    this.Router.navigate(['journal']);
  }

  showWarning(warning: TemplateRef<any>) {
    let warningWasAcknowledged = sessionStorage.getItem(
      'warningWasAcknowledged',
    );
    if (!warningWasAcknowledged) {
      this.modalService.open(warning, { ariaLabelledBy: 'modal-basic-title' });
    }
  }

  public acknowledgeWarning() {
    sessionStorage.setItem('warningWasAcknowledged', 'true');
  }
}