import {Component, Inject, OnDestroy, OnInit} 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: 'cc-army',
  templateUrl: './army.component.html',
  styleUrls: ['./army.component.css']
})
export class ArmyComponent implements OnInit, OnDestroy {

  army: Army[];

  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});
  }

}