import {Component, 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 {BaseConfig} from '../app.config';
import {Observable} from 'rxjs';


@Component({
  selector: 'cc-army',
  templateUrl: './army.component.html',
  styleUrls: ['./army.component.scss']
})
export class ArmyComponent implements OnInit {

  readonly fraction = Fraction;

  army: Army[] = [{}, {}];

  singleViewSelected = this.fraction.BLUFOR;

  isSmallLayout;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private armyService: ArmyService) {
  }

  ngOnInit() {
    this.armyService.getArmies().subscribe(army => {
      this.army = army;
    });

    this.isSmallLayout = (window.innerWidth <= BaseConfig.responsive.breakpointSmallPx);
    Observable.fromEvent(window, 'resize').subscribe(event => {
      this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointSmallPx;
    });
  };

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

  singleViewSwitch(switchFraction: Fraction) {
    this.singleViewSelected = switchFraction;
  }
}