import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

import {DOCUMENT} from '@angular/common';
import {Fraction} from "../../utils/fraction.enum";
import {CSSHelpers} from "../../global.helpers";
import {RouteConfig} from "../../app.config";
import {Rank} from "../../models/model-interfaces";
import {RankService} from "../../services/army-management/rank.service";


@Component({
  selector: 'cc-rank-overview',
  templateUrl: './rank-overview.component.html',
  styleUrls: ['./rank-overview.component.css']
})
export class RankOverviewComponent implements OnInit, OnDestroy {

  ranks: Rank[];

  readonly fraction = Fraction;

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

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

    // init rank data
    this.rankService.findRanks()
        .subscribe(ranks => {
          this.ranks = ranks;
        });
  };

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