import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {

  task: FirebaseUploadTaskObservable<firebase.storage.UploadTaskSnapshot>;
  state: Observable<String>;
  uploading: Observable<Boolean>;
  success: Observable<Boolean>;
  percentage: Observable<number>;

  constructor(private afAuth: AngularFireAuth, private storage: AngularFireStorage) {  }

  upload(event) {
    const file = event.srcElement.files[0];

    this.task = this.storage.upload(`/uploads/${file.name}`, file, {
      customMetadata: {
        uid: this.afAuth.auth.currentUser.uid
      }
    });

    this.state = task.map(s => s.state);
    this.uploading = state.map(s => s === firebase.storage.TaskState.RUNNING);
    this.success = state.map(s => s === firebase.storage.TaskState.SUCCESS);
    this.percentage = task.map(s => s.bytesTransferred / s.totalBytes * 100);
  }

  pause(event) {
    task.pause();
  }

  resume(event) {
    task.resume();
  }

  cancel(event) {
    task.cancel();
  }
}