import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subject } from 'rxjs-compat';
import { first, takeUntil } from 'rxjs/operators';
import { FileService } from '../../../services/file.service';
import { MD2Service } from '../../../services/MD2/md2.service';
import { MsgBoxService } from '../../../services/msg-box.service';
import { StateService } from '../../../services/state.service';
import { ADButtons, ADIcon } from '../../../ui/alert-dlg/alert-dlg.model';
import { TreasureType, DrawingBag, DrawingItem } from '../massive-darkness2.model';
import { MD2Base, MD2ComponentBase } from '../MD2Base';

@Component({
  selector: 'md2-treasure-bag',
  templateUrl: './treasure-bag.component.html',
  styleUrls: ['./treasure-bag.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TreasureBagComponent extends MD2ComponentBase implements OnInit {

  TreasureType = TreasureType;
  drawingAmount = 1;
  constructor(
    private fileService: FileService,
    private msgBoxService: MsgBoxService,
    public md2Service: MD2Service,
    protected stateService: StateService,
    protected route: ActivatedRoute,
    protected cdRef: ChangeDetectorRef,
  ) {
    super(md2Service, stateService, route, cdRef);

    this.md2Service.mobBeenKilledSubject.pipe(takeUntil(this.destroy$)).subscribe(mob => {
      //this.drawingTreasure(mob.rewardTokens);
      for (let i = 0; i < mob.carriedTreasure.length; i++) {
        const carriedTreasure = mob.carriedTreasure[i];
        carriedTreasure.drawingWeight = 1;
        this.md2Service.treasureBag.AddItem(carriedTreasure);
      }
      this.detectChanges();
    });
    this.md2Service.refreshTreasureBagSubject.pipe(takeUntil(this.destroy$)).subscribe(treasureBag => {
      //this.drawingTreasure(mob.rewardTokens);
      this.detectChanges();
    });

  }

  ngOnInit(): void {
    //this.md2Service.initTreasureBag();
    this.detectChanges();
  }
  detectChanges() {

    if (!this.cdRef['destroyed']) {
      this.cdRef.detectChanges();
    }
  }
  resetTreasureBag(showConfirmMsg = true) {
    this.msgBoxService.show("Restore Treasure Bag", { text: 'Are you sure?', icon: ADIcon.QUESTION, buttons: ADButtons.YesNo }).pipe(first()).subscribe(result => {
      if (result) {
        //this.md2Service.initTreasureBag();
      }
    });

  }
  treasureImage(type: TreasureType) {
    return this.imgUrl(`TreasureToken/${TreasureType[type]}.png`);
  }
  drawTreasure() {
    this.msgBoxService.showInputbox("Drawing", "drawing how many treasure?", { inputType: 'number', inputValue: this.drawingAmount.toString() })
      .pipe(first()).subscribe(result => {
        if (result) {
          this.drawingTreasure(result, false);
        }
      });
  }
  drawAndRemoveTreasure() {
    this.msgBoxService.showInputbox("Draw And Remove", "drawing how many treasure?", { inputType: 'number', inputValue: this.drawingAmount.toString() })
      .pipe(first()).subscribe(result => {
        if (result) {
          this.drawingTreasure(result, true);
        }
      });
  }
  drawingTreasure(amount: number, drawAndRemove: boolean) {
    this.drawingAmount = amount;
    let drawItems = drawAndRemove ? this.md2Service.treasureBag.DrawAndRemove(this.drawingAmount) : this.md2Service.treasureBag.Draw(amount);

    let resultHtmlText = drawItems.map(i => `<img src="${i.imageUrl}" class='mr-1' width="80px">`).join();

    this.msgBoxService.show("You Got", { text: resultHtmlText });
    this.detectChanges();
  }
  public get treasureBag(): DrawingBag<DrawingItem> {
    return this.md2Service.treasureBag;
  }

}
