import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, ParamMap, Router} from "@angular/router";
import {VideoService} from "../video.service";
import {DomSanitizer} from "@angular/platform-browser";
import {TagService} from "../tag.service";
import {NgxY2PlayerComponent, NgxY2PlayerOptions} from "ngx-y2-player";

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

    public youtubeId;

    public videoInfo;

    public errorMsg;

    public tags;

    @ViewChild('video') video: NgxY2PlayerComponent;

    constructor(private route: ActivatedRoute, private router: Router, private _videoService: VideoService,
                private _tagService: TagService) {

    }

    playerOptions: NgxY2PlayerOptions = {
        videoId: this.youtubeId,
        height: 'auto',
        width: 'auto',
        playerVars: {
            autoplay: 1,
        },
    };


    ngOnInit() {
        this.route.paramMap.subscribe((params : ParamMap) => {
            this.youtubeId = params.get('youtubeId');
        });

        this._videoService.getVideo(this.youtubeId)
            .subscribe(data => this.videoInfo = data,
                error => this.errorMsg = error);

        this._tagService.getTagsForVideo(this.youtubeId)
            .subscribe(data => this.tags = data,
                error => this.errorMsg = error);
    }



    tagStyle(tag): string {

        if(tag.times == null) {
            return 'btn-default';
        }

        if(tag.complete) {
            return 'btn-success';
        }

        let arr = tag.times[0];

        if(arr.start == 0 && arr.stop == this.videoInfo.duration){
            return 'btn-danger'
        }

        return 'btn-warning'
    }

    pause() {
        this.video.videoPlayer.pauseVideo();
    }
    play() {
        this.video.videoPlayer.playVideo();
    }
    stop() {
        this.video.videoPlayer.stopVideo();
    }
    go(second) {
        this.video.videoPlayer.seekTo(second, true);
    }

    onReady(event) {
        console.log('ready');
        console.log(event);
    }

    onStateChange(event) {
        console.log('change');
        console.log(event);
    }

}