import { ActivatedRoute } from '@angular/router';
import { BoxOverview } from './../../interfaces/boxes';
import { Component, OnInit, HostBinding, Input } from '@angular/core';
import { BytefliesService } from '../../services/byteflies/byteflies.service';
import { groupBy, lastItems } from '../../utils/utils';
import { routerTransition } from '../../animations/router.animations';

@Component({
  selector: 'app-boxes-overview',
  templateUrl: './boxes-overview.component.html',
  styleUrls: ['./boxes-overview.component.scss'],
  animations: [routerTransition()]
})
export class BoxesOverviewComponent implements OnInit {
  @HostBinding('@routerTransition') transition;

  legend: string[] = ['empatica', 'faros'];
  error: string;

  boxes: BoxOverview[];
  assigning: number;
  id: number;

  assign(id: number, assigning: boolean) {
    this.assigning = assigning ? id : null;
  };

  constructor(private service: BytefliesService, private route: ActivatedRoute) { }


  ngOnInit() {
    this.error = '';
    const id$ = this.route.params.switchMap(params => params['id']);
    id$.subscribe(id => {
      this.id = (+id);
      this.fetchAll(this.id);
    });
  };

  refetch() {
    this.fetchAll(this.id);
  }

  fetchAll(experimentId) {
    this.service.getBoxes(experimentId)
      .then(boxes => this.boxes = boxes)
      .catch(error => {
        this.error = error;
      });
  }
};