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 page: number = 0;
  public names: string[] = [];
  public finalSearchTerm: string = '';
  public searchTerm: string = '';
  public filteredNames: string[] = [];

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

    const state = {
      searchTerm: this.searchTerm,
      page: this.page,
      userType: this.userType,
      punishmentType: this.punishmentType
    };
    const title = 'Altitude Bans';
    const url = window.location.href;
    window.history.pushState(state, title, url)

    window.addEventListener('popstate', (event) => {
      if (event.state && event.state.searchTerm !== undefined) {
        this.searchTerm = event.state.searchTerm;
        this.finalSearchTerm = event.state.searchTerm;
        this.page = event.state.page;
        this.userType = event.state.userType;
        this.punishmentType = event.state.punishmentType;
      }
    });
  }

  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 = [];
  }

  public search() {
    const state = {
      searchTerm: this.searchTerm,
      page: this.page,
      userType: this.userType,
      punishmentType: this.punishmentType
    };
    const title = 'Altitude Bans';
    const url = window.location.href;
    window.history.pushState(state, title, url);
    this.finalSearchTerm = this.searchTerm;
  }
}