import {Component, Inject, Input, 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 '../../utils/global.helpers';
import {RouteConfig} from '../../app.config';
import {RankService} from '../../services/army-management/rank.service';
import {DataTraceService} from '../../services/army-service/data-trace.service';
import {Decoration, Rank} from '../../models/model-interfaces';


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

  traceItem: Rank | Decoration;

  displayedColumns: string[] = ['picture', 'name'];

  readonly fraction = Fraction;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private rankService: RankService,
              private dataTraceService: DataTraceService,
              @Inject(DOCUMENT) private document) {
    this.traceItem = this.dataTraceService.getData();
  }

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


    if (this.traceItem.hasOwnProperty('isMedal')) {
      // Decoration
      const decorationItem = <Decoration> this.traceItem
      console.log("DECORATION");
    } else if (this.traceItem.hasOwnProperty('level')) {
      // Rank
      const rankItem = <Rank> this.traceItem
      console.log("RANK");
    }
  };


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