import { trigger, state, style, transition, animate } from '@angular/animations';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';
import { DropDownOption } from '../../../entity/dropDownOption';
import { GameRoomService } from '../../../services/game-room.service';
import { MD2Service } from '../../../services/MD2/md2.service';
import { MsgBoxService } from '../../../services/msg-box.service';
import { StateService } from '../../../services/state.service';
import { ADButtonColor, ADButtons } from '../../../ui/alert-dlg/alert-dlg.model';
import { ArrayUtils } from '../../../utilities/array-utils';
import { StringUtils } from '../../../utilities/string-utils';
import { DebounceTimer } from '../../../utilities/timer-utils';
import { HeroClass, MD2HeroInfo, MD2Icon } from '../massive-darkness2.model';
import { MD2Base } from '../MD2Base';

@Component({
  selector: 'ngx-hero-dashboard',
  templateUrl: './hero-dashboard.component.html',
  styleUrls: ['./hero-dashboard.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('flipState', [
      state('active', style({
        transform: 'rotateY(179deg)'
      })),
      state('inactive', style({
        transform: 'rotateY(0)'
      })),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in'))
    ])
  ]
})
export class HeroDashboardComponent extends MD2Base implements OnInit {
  heroAction(hero: MD2HeroInfo, action: string) {
    throw new Error('Method not implemented.');
  }
  showMoveAction: boolean = false;
  HeroClass = HeroClass;
  refreshUI() {
    console.log('HeroDashboard RefreshUI');

  }

  heroUpdateDebounceTimer = new DebounceTimer(1000, () => { this.broadcastHeroInfo(); })

  classOptions: DropDownOption[] = [
    new DropDownOption(HeroClass.Berserker, 'Berserker'),
    new DropDownOption(HeroClass.Paladin, 'Paladin'),
    new DropDownOption(HeroClass.Ranger, 'Ranger'),
    new DropDownOption(HeroClass.Rogue, 'Rogue'),
    new DropDownOption(HeroClass.Wizard, 'Wizard'),
    new DropDownOption(HeroClass.Shaman, 'Shaman'),
    new DropDownOption(HeroClass.Druid, 'Druid'),
  ];
  heros = [] as MD2HeroInfo[];
  wizards: MD2HeroInfo[] = [
    new MD2HeroInfo({ name: 'Ajax', mpMaximum: 6, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Baldric', mpMaximum: 5, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Ego', mpMaximum: 5, hpMaximum: 6, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Elias', mpMaximum: 6, hpMaximum: 5, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Megan', mpMaximum: 5, hpMaximum: 5, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Moira', mpMaximum: 6, hpMaximum: 5, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Myriam', mpMaximum: 7, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' }),
    new MD2HeroInfo({ name: 'Valdis', mpMaximum: 6, hpMaximum: 4, skillHtml: '', shadowSkillHtml: '' })
  ]

  public get hero() {
    return this.md2Service.playerHero;
  }

  constructor(
    private gameRoomService: GameRoomService,
    public md2Service: MD2Service,
    protected stateService: StateService,
    protected route: ActivatedRoute,
    protected cdRef: ChangeDetectorRef,
    private msgBoxService: MsgBoxService,
  ) {
    super(md2Service, stateService, route, cdRef);
    this.isHeroDashboard = true;
  }

  public get allowAttack(): boolean {
    return this.hero.uiBossFight || (!!this.md2Service.mobs && this.md2Service.mobs.length > 0) || (!!this.md2Service.roamingMonsters && this.md2Service.roamingMonsters.length > 0);
  }

  ngOnInit(): void {
    super.ngOnInit();
  }

  override signalRInitialized() {
    // this.gameRoomService.joinGameRoom(this.roomId);
    // if (this.md2Service.initialized == false) {
    //   this.gameRoomService.createGameRoom('MD2');
    //   this.md2Service.initialized = true;
    // }
  }
  initHero() {
    this.gameRoomService.gameRoomId = this.roomId;
    if (!this.md2Service.heros.some(h => h.playerInfo.signalRClientId == this.stateService.loginUserService.userAccess.signalRSessionId)) {
      this.msgBoxService.showInputbox('Select Hero Class', '', { dropDownOptions: this.classOptions, inputType: 'dropdown' })
        .pipe(first()).subscribe(heroClass => {
          if (heroClass != null) {
            // switch (heroClass) {
            //   case HeroClass.Berserker: break;
            //   case HeroClass.Wizard:
            //     this.heros = this.wizards;
            //     break;
            //   case HeroClass.Rogue: break;
            //   case HeroClass.Ranger: break;
            //   case HeroClass.Shaman: break;
            //   case HeroClass.Paladin: break;
            //   default: break;
            // }
            // this.showHeroList(heroClass, 0);
            this.initClassHeroList(heroClass);
          }
        });
    }
  }
  className: string;
  initClassHeroList(heroClass: HeroClass) {
    this.heros = [];
    this.className = HeroClass[heroClass];
    this.fileList(`Heros/${this.className}`).pipe(first()).subscribe(fileNames => {
      for (let i = 0; i < fileNames.length; i++) {
        const heroNames = fileNames[i].split('.')[0].split('-');

        this.heros.push(new MD2HeroInfo({
          name: heroNames[0].replace('/', ''),
          mpMaximum: Number.parseInt(heroNames[1]),
          hpMaximum: Number.parseInt(heroNames[2]),
          imgUrl: this.imgUrl(`Heros/${this.className}/${fileNames[i]}`),
          class: heroClass
        }))
      }
      this.heros = ArrayUtils.Shuffle(this.heros);//.sort((a, b) => StringUtils.compareSemVer(a.name, b.name));
      this.showHeroList(heroClass, 0);
    });
  }
  showHeroList(heroClass: HeroClass, index: number) {
    let className = HeroClass[heroClass];
    let heroInfo = this.heros[index];
    this.msgBoxService.show(`${className}(${index + 1}/${this.heros.length})`, {
      text: `<img src='${heroInfo.imgUrl}' class="g-width-50vw-md g-width-80vw">`,
      buttons: ADButtons.YesNo,
      cardWidthClass: '',
      confirmButtonText: 'It\'s Me!',
      cancelButtonText: 'Next',
      cancelButtonColor: ADButtonColor.INFO
    }).pipe(first()).subscribe(result => {
      if (result) {
        this.md2Service.playerJoin(heroInfo);
        this.detectChanges();
        this.gameRoomService.joinGameRoom(this.roomId);
      } else {
        index++;
        if (index == this.heros.length) index = 0;
        this.showHeroList(heroClass, index);
      }
    });
  }

  broadcastHeroInfo() {
    this.md2Service.broadcastService.broadcastMyHeroInfo();
    this.heroUpdateDebounceTimer.clearOut();
  }
  increaseRage() {
    if (this.hero.rage < 7) {
      this.hero.rage++;
    }
  }
  openDoor() {
    this.md2Service.broadcastService.broadcastHeroAction('openDoor');
    this.showMoveAction = false;
    this.detectChanges();
  }
  moveAction() {
    this.showMoveAction = true;
    this.detectChanges();
  }
  moveActionEnd() {
    this.showMoveAction = false;
    this.reduceAction();
    this.detectChanges();
  }
  action(action: string) {
    this.showMoveAction = false;
    switch (action) {
      case 'recoveryAction':
        this.msgBoxService.show('Recovery', { text: 'takes the Recover action may gain up to 2 Health or Mana in any combination (either 2 Health, 2 Mana, or 1 of each).' });
        break;
      case 'attackAction':
        this.msgBoxService.show('Attacking', { text: 'Please process attacking action in Dashboard.' });
        break;
      default:
        break;
    }
    this.md2Service.broadcastService.broadcastHeroAction(action);
    this.reduceAction();
  }
  reduceAction() {
    this.hero.remainActions -= 1;
    this.detectChanges();
    this.broadcastHeroInfo();
  }
  flip: string = 'inactive';

  toggleFlip() {
    this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
  }

  get allowStartAction() {
    return !this.md2Service.heros.some(h => h.uiActivating) && !this.hero.uiActivating && this.hero.remainActions > 0;
  }
  startActivation() {
    this.hero.uiActivating = true;
    //this.hero.remainActions = 3;
    if (this.hero.fireToken > 0) {
      this.msgBoxService.show(`You Are On ${this.iconHtml(MD2Icon.Fire)}!`, {
        text: `Roll ${this.iconHtml(MD2Icon.YellowDice)} ${this.hero.fireToken} times.`
      });
    }
    if (this.hero.frozenToken > 0) {
      let loseActions = Math.min(this.hero.frozenToken, this.hero.remainActions);
      this.hero.remainActions -= loseActions;
      this.hero.frozenToken -= loseActions;
      this.msgBoxService.show(`It's So Cold ${this.iconHtml(MD2Icon.Frost)}!`, {
        text: `Lose ${loseActions} actions.`
      });
    }
    if (this.hero.remainActions == 0) {
      this.hero.uiActivating = false;
    }
    this.broadcastHeroInfo();

  }
  endActivation() {
    if (this.hero.remainActions > 0) {
      this.msgBoxService.show('Are you sure?', { text: `End Activation will lose ${this.hero.remainActions} remaining actions.`, buttons: ADButtons.YesNo }).pipe(first()).subscribe(result => {
        if (result) {
          this.hero.remainActions = 0;
          this.endActivation();
        }
      });
    } else {
      this.hero.uiActivating = false;
      this.broadcastHeroInfo();
      this.detectChanges();
    }
  }
}
