import { Component, OnInit, Input, HostBinding, AfterViewInit, Inject } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';

@Component({
	selector: 'embedded-external-video',
	templateUrl: './embedded-external-video.component.html',
	styleUrls: ['./embedded-external-video.component.scss']
})
export class EmbeddedExternalVideoComponent implements OnInit {

	@Input() entity;

	url: SafeResourceUrl;
	title: string;
	playInline: boolean;
	modalId: string;
	// Preview image used when the popup options is selected
	videoTumbnailUrl: string;

	constructor(private sanitizer: DomSanitizer,
				private modalService: NgbModal,
				private idService: IdGeneratorService,
				private util: UtilService) { }

	@HostBinding('class') get class() { return 'col-md-8 space-between'; }

	ngOnInit() {
		this.setup();
	}

	public openModal(templateRef): void {
		this.modalService.open(templateRef, { size: 'lg', centered: true });
	}

	setup() {
		this.title = this.util.extract(this.entity, 'Title');
		this.playInline = this.util.extract(this.entity, 'VidDisplay') === 'Movie player';
		const youtubeVideoId = this.util.extract(this.entity, 'Link');

		this.modalId = this.idService.getId();
		this.videoTumbnailUrl = `https://img.youtube.com/vi/${youtubeVideoId}/0.jpg`;

		// Unary + to convert bool to number
		const autoPlay = +!this.playInline;
		this.url = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${youtubeVideoId}?autoplay=${autoPlay}`);
	}

}