import {Component, OnInit} from '@angular/core';
import {HeaderComponent} from "../header/header.component";
import {HistoryComponent} from './history/history.component';
import {HistoryService} from '../../api';
import {NgForOf, NgIf} from '@angular/common';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'app-bans',
  imports: [
    HeaderComponent,
    HistoryComponent,
    NgIf,
    FormsModule,
    NgForOf
  ],
  templateUrl: './bans.component.html',
  styleUrl: './bans.component.scss'
})
export class BansComponent implements OnInit {

  constructor(public historyApi: HistoryService) {
  }

  public userType: 'player' | 'staff' = "player";
  public punishmentType: 'all' | 'ban' | 'mute' | 'kick' | 'warn' = "all";
  public names: string[] = [];
  public searchTerm: string = '';
  public filteredNames: string[] = [];

  ngOnInit() {
    this.historyApi.getUserNames(this.userType, this.punishmentType).subscribe(names => {
      this.names = names;
    })
  }

  public filterNames() {
    if (!this.searchTerm) {
      this.filteredNames = [];
      return;
    }

    this.filteredNames = this.names.filter(name =>
      name.toLowerCase().startsWith(this.searchTerm.toLowerCase())
    ).slice(0, 10);
  }

  public selectName(name: string) {
    this.searchTerm = name;
    this.filteredNames = [];
  }
}