import {Component, Inject} from "@angular/core";
import {Army} from "../models/model-interfaces";
import {ArmyService} from "../services/army-service/army.service";
import {ActivatedRoute, Router} from "@angular/router";
import {Fraction} from "../utils/fraction.enum";
import {DOCUMENT} from "@angular/common";
import {RouteConfig} from "../app.config";
import {CSSHelpers} from "../global.helpers";


@Component({
  selector: 'army',
  templateUrl: './army.component.html',
  styleUrls: ['./army.component.css']
})
export class ArmyComponent {

  army: Army = {BLUFOR: {squads: [], memberCount: 0}, OPFOR: {squads: [], memberCount: 0}};

  readonly fraction = Fraction;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private armyService: ArmyService,
              @Inject(DOCUMENT) private document) {
  }

  ngOnInit() {
    // set background image css
    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));

    // init army data
    this.armyService.getArmy()
        .subscribe(army => {
          this.army = army;
        });
  };

  ngOnDestroy() {
    if (!this.router.url.includes(RouteConfig.overviewPath)) {
      this.document.getElementById('right').setAttribute('style', '');
    }
  }

  select(memberId) {
    this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
  }

}