import { Component, OnInit, Input, HostBinding, Inject, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { HighlightedContentData } from 'src/app/core/interfaces/interfaces.component';
import { HighlightedContentService } from '../highlighted-content.service';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { DOCUMENT } from '@angular/common';

type linkType = 'button' | 'text' | 'missing';

@Component({
	selector: 'div[highlighted-content-main]',
	templateUrl: './highlighted-content-main.component.html',
	styleUrls: ['./highlighted-content-main.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class HighlightedContentMainComponent implements OnInit, OnDestroy {

	@Input() entity;

	data: HighlightedContentData;
	videoId: string;
	descTextLength = 150;
	componentId = this.idGenerator.getId();

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

	constructor(
		private idGenerator: IdGeneratorService,
		private highlightedContentService: HighlightedContentService,
		private resizeContentService: ResizeContentService,
		private constantsService: ConstantsService,
		@Inject(DOCUMENT) private document
	) { }

	ngOnInit() {
		if (this.entity) {
			this.data = this.highlightedContentService.parseJson(this.entity);
			this.videoId = this.idGenerator.getId();
		}

		this.textTruncation();
		this.resizeContentService.registerCallback(this.componentId, () => this.textTruncation());
	}

	ngOnDestroy(): void {
		this.resizeContentService.destroyCallback(this.componentId);
	}

	private textTruncation(): void {
		const currentWidth = window.innerWidth || this.document.documentElement.clientWidth;

		if (currentWidth >= this.constantsService.BOOTSTRAP_BREAKPOINTS.LG && currentWidth < this.constantsService.BOOTSTRAP_BREAKPOINTS.XL) {
			this.descTextLength = 120;
		} else if (currentWidth >= this.constantsService.BOOTSTRAP_BREAKPOINTS.XL) {
			this.descTextLength = 400;
		} else {
			this.descTextLength = 9999;
		}
	}

	private playVideo() {
		const video = <any>document.getElementById(this.videoId);
		if (video.paused) {
			video.play();
			this.highlightedContentService.videoPlayPauseText = 'PAUSE';
		} else {
			video.pause();
			this.highlightedContentService.videoPlayPauseText = 'PLAY';
		}
	}
}