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 '../../utils/global.helpers';
import {RouteConfig} from '../../app.config';
import {Decoration} from '../../models/model-interfaces';
import {DecorationService} from '../../services/army-management/decoration.service';


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

  decorationsBlufor: Decoration[];

  decorationsGlobal: Decoration[];

  decorationsOpfor: Decoration[];

  hasFixedTableHeader = false;

  readonly fraction = Fraction;

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

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

    // init decoration data
    this.decorationService.findDecorations()
        .subscribe(decorations => {
          this.decorationsBlufor = decorations.filter(d => d.fraction === 'BLUFOR');
          this.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
          this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
        });
  };

  select(decoration: Decoration) {
    this.router.navigate(['../find/award', decoration._id], {relativeTo: this.route});
  }

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