import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { _Class } from '../../../../../../backend/Types/Types';
import { getClassColor } from '../../../../../../backend/Types/PlayerSpecs';
import { IApiService } from '../../services/ApiService/ApiService';


@Component({
  selector: 'characters',
  templateUrl: './characters.component.html',
})
export class FrontcraftCharactersComponent implements AfterViewInit, OnDestroy{
  options: any = {};
  themeSubscription: any;
  search = ""

  allcharacters = []
  displayedcharacters = []

  constructor(private theme: NbThemeService, private api:IApiService) {
  }

  changeSearch(){
    if(!this.search || this.search == "") 
      this.displayedcharacters = this.allcharacters
    else{
      const searchterm = this.search.toLocaleLowerCase()
      this.displayedcharacters = this.allcharacters.filter(char => 
        char.charactername.toLowerCase().includes(searchterm) ||
        char.class.toLowerCase().includes(searchterm) ||
        char.specname.toLowerCase().includes(searchterm) ||
        char.race.toLowerCase().includes(searchterm)
      )
    }
  }

  onChartClick(event){
    this.search = event.name
    this.changeSearch()
  }

  ngAfterViewInit() {
    this.themeSubscription = this.theme.getJsTheme().subscribe(async config => {
      const data = {}

      await this.api.get('CharacterManager').getCharacters().then(chars => {
        chars.forEach(char => {
          char['color'] = getClassColor(char.class)
        })
        this.allcharacters = chars
        this.displayedcharacters = chars
        this.search=""
      })

      await Promise.all(_Class.map(async cls => {
        const c = await this.api.get('CharacterManager').getHeadCount(cls)
        data[cls] = c
      }))
      
      const echarts: any = config.variables.echarts;
      this.options = {
        backgroundColor: echarts.bg,
        color: [
          "#FFF569",
          "#C79C6E",
          "#FFFFFF",
          "#40C7EB",
          "#A9D271",
          "#F58CBA",
          "#FF7D0A",
          "#8787ED"
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        series: [
          {
            name: 'Classes',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            data: [
              { value: data['Rogue'], name: 'Rogue' },
              { value: data['Warrior'], name: 'Warrior' },
              { value: data['Priest'], name: 'Priest' },
              { value: data['Mage'], name: 'Mage' },
              { value: data['Hunter'], name: 'Hunter' },
              { value: data['Paladin'], name: 'Paladin' },
              { value: data['Druid'], name: 'Druid' },
              { value: data['Warlock'], name: 'Warlock' },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: echarts.itemHoverShadowColor,
              },
            },
            label: {
              normal: {
                textStyle: {
                  color: echarts.textColor,
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: echarts.axisLineColor,
                },
              },
            },
          },
        ],
      };
    });
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}
