import {Component, computed, inject, model} from '@angular/core';
import {PlayingCardComponent} from "../../components/playing-card/playing-card.component";
import {SearchBarComponent} from "../../components/search-bar/search-bar.component";
import {Monster} from '../../models/monster.model';
import {MonsterService} from '../../services/monster/monster.service';
import {Router} from '@angular/router';
import {toSignal} from '@angular/core/rxjs-interop';
import {MatButton} from '@angular/material/button';

@Component({
  selector: 'app-monster-list',
  standalone: true,
  imports: [
    PlayingCardComponent,
    SearchBarComponent,
    MatButton
  ],
  templateUrl: './monster-list.component.html',
  styleUrl: './monster-list.component.css'
})
export class MonsterListComponent {

  private readonly router: Router = inject(Router);
  private readonly monsterService: MonsterService = inject(MonsterService);

  monsters = toSignal(this.monsterService.getAll());
  search = model('');

  filteredMonsters = computed(() => {
    return this.monsters()?.filter(monster =>
      monster.name.toLowerCase().includes(this.search().toLowerCase() ?? [])
    );
  });

  openMonster(monster: Monster) {
    this.router.navigate(['/monster', monster.id]).then();
  }

  addMonster() {
    this.router.navigate(['/monster']).then();
  }
}
