import {Component, OnInit, ViewChild} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

import {WindowRefService} from './WindowRefService';

import * as io from 'socket.io-client';

const async = require('async');

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.css']
})
export class VideoComponent implements OnInit {

  @ViewChild('video') video: any;

  private mediaSource: MediaSource;
  private sourceBuffer: SourceBuffer;

  private window: Window;
  private src: any;

  constructor(private domSanitizer: DomSanitizer) {
    this.window = WindowRefService.nativeWindow;
    this.mediaSource = new MediaSource();
  }

  ngOnInit(): void {

    let objectURL = this.window.URL.createObjectURL(this.mediaSource);
    this.src = this.domSanitizer.bypassSecurityTrustResourceUrl(objectURL);

    if (!this.sourceBuffer && this.mediaSource.readyState === 'open') {
      this.sourceBuffer = this.mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    }

    let chunks: any[] = [];

    this.invoke(this, chunks);
  }

  invoke(context: VideoComponent, chunks: any[]) {

    async.waterfall([
      getChunkData,
      appendChunkData
    ], function (err: any, result: any) {
      // TODO: implement main callback
      console.log('finished streaming all chunks')
    });

    function getChunkData(callback: any): void {

      let socket = io.connect('http://localhost:8080');

      socket.emit('video_stream_req', false);

      socket.on('vs', function (data: any) {
        chunks.push(data);
      });

      socket.on('finish', function () {
        callback(null);
      });
    }

    function appendChunkData(callback: any): void {

      for (let i in chunks) {
        console.log('streaming chunk #' + i);
        context.stream(chunks[i], context);
      }

      callback(null, 'done');
    }
  }

  stream(chunk: any, context: VideoComponent): void {

    async.waterfall([
      validate,
      addSourceBuffer,
      append
    ], function (err: any, result: any) {
      // TODO: implement main callback
      console.log('finished appending chunk to buffer')
    });

    function validate(callback: any): void {

      console.log('validating chunk');
      if (chunk === null) {
        callback('null chunk');
      } else {
        callback(null);
      }
    }

    function addSourceBuffer(callback: any): void {

      if (!context.sourceBuffer && context.mediaSource.readyState === 'open') {
        console.log('adding source buffer');
        context.sourceBuffer = context.mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
      }

      callback(null);
    }

    function append(callback: any): void {

      try {
        console.log('appending chunk to buffer');
        context.sourceBuffer.appendBuffer(chunk);

        context.sourceBuffer.addEventListener('updateend', function () {

          callback(null, 'done');
        });
      } catch (e) {
        if (e.name === 'QuotaExceededError') {
          console.log(e.name);
        }
      }
    }
  }

}