import { Experiment } from './../../interfaces/experiments';
import { ExperimentContent } from './../../interfaces/experiments';
import { BytefliesService } from './../../services/byteflies/byteflies.service';
import { UserService } from './../../auth/user.service';
import { Component, OnInit, HostBinding } from '@angular/core';
import { routerTransition } from '../../animations/router.animations';

@Component({
  selector: 'app-experiments',
  template: `
    <div class="container">
      <app-breadcrumb></app-breadcrumb>
      <div *ngIf="error" class="error">{{error}}</div>
      <div fxLayout="row" fxLayoutWrap class="row-layout">
        <div md-ripple class="experiment" *ngFor="let experiment of experiments" [routerLink]="['/experiments', experiment.id]"
          fxFlex="0 1 calc(100% - 1rem)" 
          fxFlex.sm="0 1 calc(50% - 1rem)" 
          fxFlex.gt-sm="0 1 calc(33.33% - 1rem)">
          {{ experiment.name }}
          <span class="details">Details</span>
        </div>
      </div>
    <div>
  `,
  styleUrls: ['./experiments.component.css'],
  animations: [routerTransition()]
})
export class ExperimentsComponent implements OnInit {
  @HostBinding('@routerTransition') transition;

  experiments: Experiment[];
  error: string;

  constructor(private user: UserService, private byteflies: BytefliesService) { }

  ngOnInit() {
    this.error = '';
    this.byteflies.getExperiments(this.user.id)
      .then(results => this.experiments = results)
      .catch(error => {
        this.error = 'Something went wrong';
        console.log('FAILED TO GET EXPERIMENTS', error);
      });
  }

}