const cdn = "https://video.dobrodel.ru/videos/";

const video = {
	main: '',
	canvas: '',
	loaderback: "",
	first_start: true,
	muted: true,
	fullscreen: false,
	seeking: false,
	width: 0,
	height: 0
}

const controls = {
	rate: "",
	share: "",
	mute: "",
	mute_icon: "",
	fullscreen: "",
	fullscreen_icon: "",
	play: "",
	pause: "",
	hidePause: '',
	hidePoint: '',
}

const progress = {
	video_current_time_span: "",
	video_progress_div: "",
	video_progress: "",
	point: ""

}

const btns = {
	cta_btn: "",
	modal__cta_close: "",
	modal_cta: "",
	btns_component: ""
}

const wrapper = {
	width: 0,
	height: 0
}

const shareData = {
	title: 'Персональное обращение Константина Михалькова',
	text: 'Обращение главы городского округа Солнечногорск',
	url: window.location.href,
}

const hash = new URLSearchParams(window.location.search).get('id') || window.location.hash.replaceAll('#','');
const error_page = 'https://dobrodel.mosreg.ru/';
var stop_play = true;
var tgs = {
	'play_click':0,
	'view_25':0,
	'view_50':0,
	'view_75':0,
	'target_click':0
};

const debug = new URLSearchParams(window.location.search).get('debug') && new URLSearchParams(window.location.search).get('debug') == 1 || 0;

const validate = (string) => {
	if(!string)
		return false;
    if(!/^[A-Z0-9]{6,9}$/.test(string))
        return false;
    const map = {'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#x27;',"/": '&#x2F;',"`": '&grave;'};
    const reg = /[&<>"'/`]/ig;
    return string.replace(reg, (match) => (map[match]));
}


const fadeIn = (el, timeout, display) => {
	el.style.opacity = 0;
	el.style.display = display || 'block';
	el.style.transition = `opacity ${timeout}ms`;
	setTimeout(() => {
		el.style.opacity = 1;
	}, 10);
};

const fadeOut = (el, timeout) => {
	el.style.opacity = 1;
	el.style.transition = `opacity ${timeout}ms`;
	el.style.opacity = 0;

	setTimeout(() => {
		el.style.display = 'none';
	}, timeout);
};


const checkFile = async (hash) => {
	const url = cdn+hash+".mp4";
	try {
		const resp = await fetch(url, {method: "head"});
		if(resp.status !== 200) return false;
	} catch (e) {
		return false;
	}
	return true;
}

window.onhashchange = () => {
    location.reload();
}



document.addEventListener('DOMContentLoaded', async () => {
	var h = validate(hash);

	var ch = h !==false ? await checkFile(h) : false;
	if(!h || !ch) {
		location.href=error_page;
		return;
	}
	
	if(!debug) {
		var btn_activity = document.querySelector('[name=btn_get_phone]');
		var view_btn_activity = !1;
		btn_activity.setAttribute('target', '_blank');
		btn_activity.setAttribute('href', 'https://forms.yandex.ru/u/64bfd72a73cee7b90b5908ae/?id='+hash);

		btn_activity.addEventListener('click', function(){
			ym(94574592,'reachGoal','target_click');
			window.open(this.href, this.target);
		});
	}		

	video.main = document.querySelector('#video');
	video.main.setAttribute('src', cdn+h+".mp4");

	video.loaderback = document.querySelector('.loaderback');
	video.first_start = true;

	controls.rate = document.querySelector('#playback_rate');
	controls.share = document.querySelector('#share');
	controls.mute = document.querySelector('#mute_video');
	controls.mute_icon = document.querySelector('#mute_icon')
	controls.fullscreen = document.querySelector('#fullscreen');
	controls.fullscreen_icon = document.querySelector('#fullscreen_icon');

	controls.play = document.querySelector('#play');
	controls.pause = document.querySelector('#pause');
	fadeOut(controls.pause, 10)

	btns.cta_btn = document.querySelector('.l_b_btn')
	btns.btns_component = document.querySelector('.btns_component');

	progress.video_current_time_span = document.querySelector('#video_current_time');
	progress.video_progress_div = document.querySelector('#video_progress')
	progress.video_progress = document.querySelector('.l_v_pvb')
	progress.point = document.querySelector('.progress_point')

	window.addEventListener('resize', () => {
		getWidtHeight()
	})

	window.addEventListener('orientationchange', () => {
		getWidtHeight()
	})

	document.querySelector(".close-top").addEventListener("click", (e) => {
		document.querySelector("#modaltext-detail").textContent = "";
		document.querySelector("#modal-detail").classList.add("hidden");

	});
	window.addEventListener("click", function (e) {
		if (e.target == document.querySelector('#modal-detail')) {
			document.querySelector("#modaltext-detail").textContent = "";
			document.querySelector("#modal-detail").classList.add("hidden");
		}
	});

	video.main.addEventListener('loadeddata', () => {
		getWidtHeight();
		if(video.main.muted && stop_play) {
			video.main.pause();
			stop_play = !1;
		}
		video.loaderback.classList.add('hidden')
		progress.video_current_time_span.classList.add('hidden')
		progress.point.classList.add('hidden')

		if (isHDScreen() && isVideoHorisontal()) {
			video.canvas = document.querySelector('#canvas_bg_hd');
			document.querySelector('#canvas_bg').classList.add('hidden');
		} else {
			video.canvas = document.querySelector('#canvas_bg');
			document.querySelector('#canvas_bg_hd').classList.add('hidden');
		}
		
		video.canvas.addEventListener('click', () => {
			if (isFirstStart()) {
				firstStartVideo()
				video.first_start = false;
				videoPlayPause();
			} else {
				videoPlayPause();
			}
		})

		video.canvas.style.filter = "brightness(60%) blur(20px)";
		video.main.style.filter = "brightness(60%)";
	})

	video.main.addEventListener('timeupdate', () => {
		if(!debug && !view_btn_activity && video.main.currentTime >= (video.main.duration - 12)) {
			btn_activity.classList.remove('hidden');
		}
		let p = video.main.currentTime * 100 / video.main.duration
		progress.video_progress.style.width = p + '%'

		if (!progress.point.classList.contains("hidden")) {
			progress.video_current_time_span.innerHTML = new Date(video.main.currentTime * 1000).toISOString().substr(14, 5)
			progress.video_current_time_span.style.left = "calc(" + p + "% - 20px)"
			progress.point.style.left = "calc(" + p + "% - 6px)"
		}
		if(!tgs.view_25 && p >= 25) {
			tgs.view_25 = !0;
			ym(94574592,'reachGoal','view_25')
		}
		if(!tgs.view_50 && p >= 50) {
			tgs.view_50 = !0;
			ym(94574592,'reachGoal','view_50')
		}
		if(!tgs.view_75 && p >= 75) {
			tgs.view_75 = !0;
			ym(94574592,'reachGoal','view_75')
		}
	})

	video.main.addEventListener('play', () => {
		video.loaderback.classList.add('hidden')
		if (isFirstStart()) {
			video.main.currentTime = 0.5;
		}
		if(!tgs.play_click) {
			ym(94574592,'reachGoal','play_click');
			tgs.play_click = !0;
		}


		video.canvas.width = video.main.clientWidth;
		video.canvas.height = video.main.clientHeight;

		function draw() {

			let context = video.canvas.getContext('2d');

			if (video.main.paused || video.main.ended) {
				return;
			}

			context.drawImage(video.main, 0, 0, video.canvas.width, video.canvas.height);
			context.globalAlpha = 0.5;
			requestAnimationFrame(draw);
		}

		draw();
	})

	video.main.addEventListener('click', () => {

		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		} else {
			videoPlayPause();
		}
	})
	
	controls.play.addEventListener('click', () => {

		if (isMuted()) {
			video.muted = false;
		}

		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		} else {
			videoPlayPause();
		}
	})

	controls.pause.addEventListener('click', () => {
		videoPlayPause();
	})

	controls.mute.addEventListener('click', () => {
		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		} else {
			video.main.muted = video.main.muted ? false : true;
			let mute_cin_src = video.main.muted ? "assets/images/mute.png" : "assets/images/sound.png";
			controls.mute_icon.setAttribute('src', mute_cin_src)
			//controls.mute.querySelector('div').innerHTML = mute_cin_src;
		}
	})

	controls.rate.addEventListener('click', () => {

		var pbRate = video.main.playbackRate.toFixed(1);

		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		}

		switch (true) {
			case pbRate == 1.0:
				video.main.playbackRate = 1.2;
				break;
			case pbRate == 1.2:
				video.main.playbackRate = 1.5;
				break;
			case pbRate == 1.5:
				video.main.playbackRate = 2;
				break;
			case pbRate == 2.0:
				video.main.playbackRate = 1;
				break;
		}
		controls.rate.querySelector("div").textContent = video.main.playbackRate + "x";
	})

	controls.share.addEventListener('click', (e) => {
		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		}

		let modal = document.querySelector('#modal-detail');
		e.preventDefault();
		if (navigator.share) {
			navigator.share(shareData)
				.then(() => {
					modal.classList.remove('hidden');
					modal.querySelector('#modaltext-detail').textContent = "Вы поделились ссылкой ✔️ ";
					setTimeout(function () {
						modal.classList.add('hidden');
					}, 2000);
				})
				.catch((error) => {
					console.error('Error sharing', error)
				});
		} else {

				navigator.clipboard.writeText(shareData.url)
					.then(() => {
						modal.classList.remove('hidden');
						modal.querySelector('#modaltext-detail').textContent = "Ссылка скопирована ✔️ ";
						setTimeout(function () {
							modal.classList.add('hidden');
						}, 2000);
					})
					.catch((error) => {
						console.error('Error copying', error);
					});
		}
	})

	controls.fullscreen.addEventListener('click', () => {

		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		}
		fullscreenInOut()
	})

	progress.video_progress_div.addEventListener('click', (event) => {
		if (isFirstStart()) {
			firstStartVideo()
			video.first_start = false;
			videoPlayPause();
		} else {

			progress.video_current_time_span.classList.remove("hidden")
			progress.point.classList.remove("hidden")
			clearInterval(video.hidePoint)

			let bwidth = event.target.offsetWidth;
			let offsetLeft = (wrapper.width - bwidth) / 2
			let bpos = event.pageX - offsetLeft;
			let p = bpos * 100 / (bwidth)
			let t = p * video.main.duration / 100

			progress.video_current_time_span.style.left = "calc(" + p + "% - 20px)"
			progress.video_progress.style.width = p + '%'
			progress.point.style.left = "calc(" + p + "% - 6px)"

			video.main.currentTime = t;

			video.hidePoint = setTimeout(() => {
				progress.video_current_time_span.classList.add("hidden")
				progress.point.classList.add("hidden")
			}, 2000);
		}
	})


});


function videoPlayPause() {
	if (video.main.paused) {
		video.canvas.style.filter = "brightness(100%) blur(20px)";
		video.main.style.filter = "brightness(100%)";
		video.main.play();
		fadeOut(controls.play, 10);
		fadeIn(controls.pause, 10, "block");

		video.hidePause = setTimeout(() => {
			fadeOut(controls.pause, 1000);
		}, 1000);

	} else {
		video.main.pause();
		fadeOut(controls.pause, 10);
		fadeIn(controls.play, 10, "block");
		clearInterval(video.hidePause)
		video.canvas.style.filter = "brightness(60%) blur(20px)";
		video.main.style.filter = "brightness(60%)";

		if (isFullScreen()) {
			fullscreenInOut()
		}
	}
}

function firstStartVideo() {
	controls.mute_icon.setAttribute('src', 'assets/images/sound.png')
	video.main.muted = false;
	video.main.currentTime = 0;
	video.main.pause();
}

function isFullScreen() {
	return video.fullscreen;
}

function isMuted() {
	return video.muted;
}

function isFirstStart() {
	return video.first_start;
}

function fullscreenInOut() {

	if (isFullScreen()) {
		video.fullscreen = false;
		controls.fullscreen_icon.setAttribute('src', 'assets/images/fullscreen.png')
		fadeIn(controls.rate, 500, 'flex')
		fadeIn(controls.share, 500, 'flex')
		fadeIn(controls.mute, 500, 'flex')
		
	} else {
		video.fullscreen = true;
		controls.fullscreen_icon.setAttribute('src', 'assets/images/frame.png')
		fadeOut(controls.rate, 500)
		fadeOut(controls.share, 500)
		fadeOut(controls.mute, 500)
		
	}
}

function getWidtHeight() {
	updateSizes()

	let nb_container = document.querySelector('.l_v_container');
	nb_container.style.width = '100%'
	nb_container.style.height = '100%'
	nb_container.style.left = '0'
	nb_container.style.top = '0'

	let nb_width = ''
	let nb_height = ''
	let nb_left = ''
	let nb_top = ''

	if (wrapper.width > wrapper.height) {
		if (isHDScreen()) {
			if (isVideoHorisontal()) {
				if (video.height <= wrapper.height) {
					nb_width = wrapper.width / wrapper.height > 1.77 ? wrapper.width / 1.71 : wrapper.width / (wrapper.width / wrapper.height) + wrapper.width / 100 * 2
					nb_height = nb_width / 1.77
					nb_left = (wrapper.width - nb_width) / 2
					nb_top = (wrapper.height - nb_height) / 2
				} else {
					nb_height = wrapper.height
					nb_width = nb_height * 1.77
					nb_left = (wrapper.width - nb_width) / 2
					nb_top = 0
				}
				nb_container.style.width = nb_width + 'px'
				nb_container.style.height = nb_height + 'px'
				nb_container.style.left = nb_left + 'px'
				nb_container.style.top = nb_top + 'px'

				if (wrapper.width / wrapper.height < 1.77) {
					video.main.style.width = '100%';
					video.main.style.height = 'auto'
				} else {
					video.main.style.width = 'auto';
					video.main.style.height = '100%';
				}
			} else {
				//и вертикальное видео, то видео по высоте 100% а прогресс бар на всю ширину экрана
				video.main.style.width = 'auto';
				video.main.style.height = '100%'
			}
		}
	} else {
		//если вертикальная область просмотра
		if (isVideoHorisontal()) {
			//и горизонтальное видео
			video.main.style.width = '100%';
			video.main.style.height = 'auto'
		} else {
			//и вертикальное видео
			video.main.style.width = 'auto';
			video.main.style.height = '100%'
		}
	}
}
function updateSizes() {
	wrapper.width = window.innerWidth
	wrapper.height = window.innerHeight

	video.width = video.main.offsetWidth
	video.height = video.main.offsetHeight

	if (window.innerWidth < window.innerHeight) {
		document.getElementsByClassName('l_b_b')[0].style.flexDirection = "column";
	} else {
		document.getElementsByClassName('l_b_b')[0].style.flexDirection = "row";
	}
}
function isHDScreen() {
	let screenWidth = screen.width
	let screenHeight = screen.height
	return (screenWidth >= 1920 && screenHeight >= 1080) ? true : false;

}
function isVideoHorisontal() {
	let videoWidth = video.width
	let videoHeight = video.height

	return (videoWidth > videoHeight) ? true : false;
}
function copyLink() {
	let modal = document.querySelector('#modal-detail');
	navigator.clipboard.writeText(window.location.href);
	modal.classList.remove('hidden');
	modal.querySelector('#modaltext-detail').textContent = "Ссылка скопирована ✔️ ";
	setTimeout(function () {
		modal.classList.add('hidden');
	}, 1000);
}