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

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


  public getCurrentButtonId(options: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
    if (options == this.punishmentType) {
      return 'currentButton'
    }
    return null;
  }

  constructor(public historyApi: HistoryService) {
  }

  public active: string = '';
  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[] = [];
  public historyCount: HistoryCount = {
    bans: 0,
    mutes: 0,
    kicks: 0,
    warnings: 0
  }

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

    this.historyApi.getTotalPunishments().subscribe(totalPunishments => {
      this.historyCount = totalPunishments;
    })

    this.pushState();

    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() {
    this.pushState()
    this.finalSearchTerm = this.searchTerm;
  }

  public changeHistoryType(type: 'player' | 'staff') {
    this.pushState();
    this.userType = type;
  }

  public changeHistoryPunishment(type: 'all' | 'ban' | 'mute' | 'kick' | 'warn') {
    this.pushState();
    this.punishmentType = type;
  }

  public nextPage() {
    if (this.page === this.getMaxPage() - 1) {
      return;
    }
    this.setPage(this.page++)
  }

  public previousPage() {
    if (this.page === 0) {
      return;
    }
    this.setPage(this.page--)
  }

  public setPage(page: number) {
    this.pushState();
    this.page = page
  }

  private pushState() {
    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);
  }

  public getMaxPage() {
    // @ts-ignore
    const all = this.historyCount.bans + this.historyCount.mutes + this.historyCount.warnings;
    switch (this.punishmentType) {
      case 'all':
        return Math.ceil(all / 10);
      case 'ban':
        // @ts-ignore
        return Math.ceil(this.historyCount.bans / 10);
      case 'mute':
        // @ts-ignore
        return Math.ceil(this.historyCount.mutes / 10);
      case 'kick':
        // @ts-ignore
        return Math.ceil(this.historyCount.kicks / 10);
      case 'warn':
        // @ts-ignore
        return Math.ceil(this.historyCount.warnings / 10);
      default:
        return 0;
    }
  }
}