/* global _, angular, i18n, Ladda, Odometer */
'use strict';

angular.module('DinsorApp.directives', [])

/* Layouts */
.directive('headBar', ['$location', '$timeout', function($location, $timeout) {
	return {
		restrict: 'A',
		templateUrl: 'templates/layouts/header.suchatvee',
		link: function(scope, element, attrs) {
			
			// navigation change position
			scope.navigationChange = function() {
				if($location.path() == '/') {
					$('header').removeClass('absolute').addClass('relative');
				}else {
					$('header').removeClass('relative').addClass('absolute');
				}
			}
			
			scope.$on('$viewContentLoaded', function (event, viewConfig) {
				$timeout(function() {
					scope.navigationChange();
				}, 400);
			});
			
			scope.$on("$routeChangeStart", function (event, route, current) {
				scope.navigationChange();
			});
			
			scope.menu = [
				{ "title": "หน้าหลัก", "path": "/", "state": "1" },
				{ "title": "บทความ / ความรู้", "path": "/article", "state": "1" }
			];
			
			$(document).ready(function(){
				$('.sidenav').sidenav();
			});
			//
		}
	};
}])
.directive('sitemap', [function() {
	return {
		restrict: 'A',
		templateUrl: '/templates/layouts/sitemap.suchatvee',
		link: function(scope, element, attrs)
		{
			attrs.$observe('sitemap', function(program) {
				//scope.service.program.data('sitemap', institution).then(function(data) {
					//console.log(data)
				//	scope.sitemap = data;
				//});
			});
		}
	};
}])
.directive('copyright', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/copyright.suchatvee'
	};
}])
.directive('cookiePolicy', [function() {
	return {
		restrict: 'C',
		templateUrl: '/templates/layouts/cookie.suchatvee',
	};
}])

/* elements */
.directive('image', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('image', function(image) 
			{
				// var img = new Image();
				// img.onload = function() {
				// 	var ratio = this.height / this.width;
				// 	element.css('padding-top', ratio *100+'%');
				// 	element.css('position','relative');
				// }
				// img.src = 'https:' + image;
				// element.removeAttr('image');
				// element.css('background-image', "url('"+image+"')").addClass('cover');
				// //
				// element.removeAttr('image');

				var img = new Image();
				img.onload = function() {
					const height = this.height;
					element.css('height', height + 'px');
				};

				img.src = image;
				element.css('background-image', "url('"+image+"')");
				element.removeAttr('image');
			});
		}
	}
}])
.directive('background', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('background', function(image)
			{
				var img = new Image();
				img.onload = function() {
					var height = (this.height / this.width) * 100;
					if(attrs.height) {
						element.css('height', attrs.height + 'px');
					}else {
						element.css('height', height + 'vw');
					}
				}
				
				if (image.indexOf("http://") != 0 || image.indexOf("https://") != 0) {
					img.src = 'https:' + image;
				}
				img.src = image;
				element.css("background-image", "url('"+image+"')");
				
				// background position
				if(attrs.position == 'center') {
					element.addClass('bg-cover-center');
				}else {
					element.addClass('background-image width');
				}
				element.removeAttr('background');
			});
		}
	}
}])
.directive('icon', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('icon', function(image) 
			{
				var $img = $('<img/>');
				var img = new Image();
				img.onload = function() {
					$img.attr('src', image);
					element.append($img);
				}
				img.src = image;
				element.removeAttr('icon');
			});
		}
	}
}])
.directive('aos', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{

			$timeout(function() {
				AOS.init({
					disable: 'mobile'
				});
			}, 900);
			//
		}
	}
}])

/* Web Content */
.directive('campaign', ['$timeout', '$window', function($timeout, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			
			// get campaign info
			scope.service.app.campaign().then(function(response) {
				// console.log(response);
				scope.campaign = response.data;
				
				const progress = scope.campaign.supporter * 100 / scope.campaign.target;
				const result_progress = Math.ceil(progress);
				let progress_bar= document.getElementById("progress_bar");
				// progress_bar.style.setProperty('--progressAfter',result_progress+'%')
			});
			
			// get article
			scope.service.app.article().then(function(respone) {
				// scope.article = respone.data;
				const articles = respone.data;
				
				var random = Math.floor(Math.random() * articles.length);
				scope.article = articles[random];
				// console.log(scope.article);
			});
			
			// registration
			scope.submitForm = function() {
				const formId = '#form_campaign';
				let valid = 0;
				let formData = new FormData();
				let register = {};
				//
				$.each($(formId).serializeArray(), function (index, key) {
					if(key.name == 'email' || key.name == 'line_id' || key.name == 'phone'){
						if(key.value != ''){
							valid++;
						}
					}
					//
					register[key.name] = key.value;
				});
				formData.append('form_id', "5b19566288045560c4e645ac2fda36fa");
				formData.append('data', JSON.stringify(register));
				
				if (valid > 0) {
					scope.service.app.registration(formData).then(function(response) {
						if(!response.error) {
							// scope.alert('toast', 'success', '', response.msg, '/register-complete');
							$window.location.href = '/register-complete';
						} else {
							scope.alert('basic', 'error', 'มีบางอย่างผิดพลาด', response.msg, null);
						}
					});
				}else{
					scope.alert('basic', 'error', 'มีบางอย่างผิดพลาด', 'กรอกช่องทางในการประสานงานอย่างน้อย 1 ช่องทาง', null);
				}
			}
			//
		}
	}
}])
.directive('article', ['$routeParams', 'ngMeta', function($routeParams, ngMeta) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			var id = $routeParams.id;
			// console.log(id);
			
			scope.service.app.article(id).then(function(respone) {
				scope.article = respone.data;
				// console.log(scope.article);
				
				// article highlight
				scope.article_highlight = [];
				for (let i=0; i<5; i++) {
					if(scope.article[i] != undefined) scope.article_highlight.push(scope.article[i]);
				}
				// console.log(scope.article_highlight);
				
				if(id) {
					// setting meta tags dynamically
					if(scope.article.article_title) {
						ngMeta.setTitle(scope.article.article_title);
					}
					
					if(scope.article.length == 0) {
						scope.alert('basic', 'warning', 'มีบางอย่างผิดพลาด', 'ไม่พบข้อมูล', '/article');
					}
				}
			});
			//
		}
	}
}])

/* Plugin */
.directive('sharethisSocial', ['$timeout', '$window', function($timeout, $window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			//
			const $sharethis = $('<div/>').addClass('sharethis-inline-share-buttons');
			
			$timeout(function() {
				element.append($sharethis);
			}, 1000);
		}
	}
}])
.directive('commentsPlugin', ['$timeout', '$location', function($timeout, $location) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) 
		{
			const currentUrl = $location.absUrl();
			const height = 500;
			//
			var url = '//services.dinsor.co.th/app/client/suchatvee/library/fb-plugin/fb-comments?url='+currentUrl;
			var $iframe = $('<iframe scrolling="no" frameborder="0" allow="fullscreen" />').attr('id', 'fb_comments');
			$iframe.css({width:'100%', height: height + 'px', border:'none', overflow:'hidden', marginTop:'2rem'});
			$iframe.attr('src', url);
			//
			element.append($iframe);
		}
	}
}])
.directive('gallery', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('gallery', function(id) {
				if(id) {
					/* Gallery */
					scope.service.app.media(id).then(function(respone) {
						var gallery = respone.data.gallery;
						// console.log(gallery);
						
						if(gallery.length) {
							var $container = $('<div/>').addClass('container');
							
							// gallery carousel
							var $carousel = $('<div/>').addClass('card-gallery carousel carousel-slider relative');
							var $gradient = $('<div/>').addClass('background-gradient-left-right');
							var $btnPrev = $('<a/>').addClass('btn-prev absolute').append($('<img/>').attr('src', '/public/img/icon/icon-prev-white.png'));
							var $btnNext = $('<a/>').addClass('btn-next absolute').append($('<img/>').attr('src', '/public/img/icon/icon-next-white.png'));
							
							angular.forEach(gallery, function(item) {
								var	$item = $('<div/>').addClass('carousel-item relative');
								var $image = $('<img/>').attr('src', item.image);
								//
								$item.append($image);
								$carousel.append($item);
							});
							$container.append($carousel.append($btnPrev).append($btnNext));
							element.append($container);
							//
							
							element.ready(function() {
								// carousel
								$carousel.carousel({
									fullWidth: true
								});
								
								$carousel.find('.btn-prev').click(function(e) {
									e.preventDefault();
									e.stopPropagation();
									$carousel.carousel('prev');
								});
								
								$carousel.find('.btn-next').click(function(e) {
									e.preventDefault();
									e.stopPropagation();
									$carousel.carousel('next');
								});
							});
							//
						}
					});
				}
				//
			});
		}
	}
}])
.directive('video', ['$timeout', function($timeout) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			attrs.$observe('video', function(id) {
				if(id) {
					/* Video & Media */
					scope.service.app.media(id).then(function(respone) {
						var media = respone.data.video;
						// console.log(media);

						if(media.length) {
							var videoHight = 675;
							if(scope.mobile) videoHight = 200;
							//
							var $headerTitle = $('<h1/>').addClass('card-title semi-bold margin-0').text('คลิป');
							var $videoPreview = $('<div/>').addClass('video-preview');
							var $programVideo = $('<div/>').addClass('program-video row');
							var $container = $('<div/>').addClass('container');
							
							$timeout(function() {
								scope.previewVideo(media[0].url);
								//
								angular.forEach(media, function(item) {
									var url = item.url;
									var $col = $('<div/>').addClass('col s6 m4 l4');
									var $card = $('<div/>').addClass('card-video relative cursor-pointer overflow-hidden');
									var $thumbnail = $('<img/>').addClass('card-thumbnail').attr('src', scope.loadThumbnail(item.thumbnail, url));
									var $backgroundBlack = $('<div/>').addClass('background-black').css('opacity', '0.5').css('z-index', '2');
									var $icon = $('<img/>').addClass('card-icon absolute-center').attr('src', '/public/img/icon/icon-play-video.png');
									//
									$col.on('click', function() {
										scope.previewVideo(url);
									});
									$card.append($thumbnail).append($backgroundBlack).append($icon);
									$programVideo.append($col.append($card));
								});
							}, 1000);
							
							scope.previewVideo = function(videoUrl) {
								$videoPreview.empty();
								//
								// $timeout(function() {
									if(videoUrl.search("youtube") != -1) {
										var url = new URL(videoUrl);
										var videoId = url.searchParams.get("v");
										var $iframe = $('<iframe/>').attr('src', 'https://www.youtube.com/embed/' + videoId).attr('width', '100%').attr('height', videoHight).attr('frameborder', '0').attr('allowfullscreen', 'allowfullscreen');
										$videoPreview.append($iframe);
									}
									else if(videoUrl.search("facebook") != -1 || videoUrl.search("fb") != -1) {
										var url = '//services.dinsor.co.th/app/client/suchatvee/library/fb-plugin/fb-player?url=' + videoUrl + '&height=' + videoHight;
										var $video = $('<iframe scrolling="no" frameborder="0" allow="fullscreen" />');
										$video.css({width:'100%', height: videoHight + 'px', border:'none'});
										$video.attr('src', url);
										$videoPreview.append($video);
									}
									else {
										var $source = $('<source/>').attr('type', 'video/mp4').attr('src', videoUrl);
										var $video = $('<video/>').addClass('card-video responsive-video').attr('controls', 'controls').attr('muted', 'muted').attr('width', '100%');
										//
										$video.append($source);
										$videoPreview.append($video);
									}
								// }, 1000);
							}
							
							scope.loadThumbnail = function(image, url) {
								var thumbnail = ' ';
								//
								if(image.search("null") == -1) {
									thumbnail = image;
								} 
								else {
									if(url.search("youtube") != -1) {
										var url = new URL(url);
										var videoId = url.searchParams.get("v");
										//
										thumbnail = 'https://img.youtube.com/vi/'+ videoId +'/sddefault.jpg';
									}
									else if(url.search("facebook") != -1 || url.search("fb") != -1) {
										
									}	
								}
								return thumbnail;
							}
							//
							$container.append($headerTitle).append($videoPreview).append($programVideo);
							element.append($container);
						} else {
							element.remove();
						}
					});
				}
				//
			});
		}
	}
}])

/* Form */
.directive('formValidate', ['$window',function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			/* Validation Form */
			scope.validateForm = function(id) {
				var status = false;
				var validate = 0;
				
				// validate input
				var formCheck = angular.element(id).find('input');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() =='') {
						validate++;
					}
				});
				
				// validate select
				formCheck = angular.element(id).find('select');
				angular.forEach(formCheck, function(input) {
					var $input = angular.element(input);
					if($input.prop('required') && $input.val() == null) {
						validate++;
					}
				});
				
				// validate radio
				formCheck = angular.element(id).find('input[type=radio]');
				var inputRadio = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					//
					if(!inputRadio.includes(nameInput)) {
						inputRadio.push(nameInput);
					}
				});
				angular.forEach(inputRadio, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate checkbox
				formCheck = angular.element(id).find('input[type=checkbox]');
				var inputCheckbox = [];
				angular.forEach(formCheck, function(input) {
					var nameInput = angular.element(input).attr('name');
					
					if(!inputCheckbox.includes(nameInput)) {
						inputCheckbox.push(nameInput);
					}
				});
				angular.forEach(inputCheckbox, function(input) {
					if(!$('input[name='+input+']').is(':checked')) {
						validate++;
					}
				});
				
				// validate username
				if(angular.element(id).find('input[name=username]').length) {
					var username = $('input[name=username]').val();
					var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					
					if (pattern.test(username) == false) {
						scope.alert_text = 'Invalid email format';
						validate++;
					}
				}
				
				// validate password
				if(angular.element(id).find('input[name=password]').length) {
					//
					var password = $('input[name=password]').val();
					var confirm_password = $('input[name=confirm_password]').val();
					//
					if(password.length < 8 || confirm_password < 8) {
						scope.alert_text = 'Please set a password according to the specified conditions';
						validate++;
					}
					
					if(password != confirm_password) {
						scope.alert_text = 'Passwords do not match';
						validate++;
					}	
				}
				
				//
				if(validate == 0) status = true;
				return status;
			}
			
			/* Form Condition */
			// limit length input
			scope.limitLength = function(event, limit) {
				var char = String.fromCharCode(event.which);
				var length = event.target.value.length;
			
				if (length >= limit || !(/[0-9]/.test(char))) {
					event.preventDefault();
				}
			}
			// valid ID card
			scope.validIdCard = function() {
				var input = $('#id_card_number');
				var id = input.val();
				var disabled = true;
				
				if(id.length >= 13) {
					for (var i = 0, sum = 0; i < 12; i++) {
						sum += parseInt(id.charAt(i)) * (13 - i);
					}
					let mod = sum % 11;
					let check = (11 - mod) % 10;
			
					if (check == parseInt(id.charAt(12))) {
						disabled = false;
						input.removeClass("invalid").addClass("valid");
						scope.alert_helper = false;
					}else {
						disabled = true;
						input.removeClass("valid").addClass("invalid");
						scope.alert_helper = true;
					}
				}
				return disabled;
			}
			// only english characters
			scope.onlyEnglishCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			// only thai characters
			scope.onlyThaiCharacters = function(e) {
				var orgi_text="ๅภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ๑๒๓๔ู฿๕๖๗๘๙๐ฎฑธํ๊ณฯญฐฅฤฆฏโฌ็๋ษศซฉฮฺ์ฒฬฦ";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) == -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			}
			$(":input").on("keyup", function(e) {
				var orgi_text="<>";
				var chk_text = e.target.value.split("");
				chk_text.filter(function(s) {        
					if(orgi_text.indexOf(s) != -1){
						e.target.value = e.target.value.replace(RegExp(s, "g"),'');
					}           
				}); 
			})
			//
		}
	}
}])

/* Alert */
.directive('alert', ['$timeout', '$window', function ($timeout, $window) {
	return {
		restrict: 'A',
		link: function (scope, element, attrs) {
			//
			scope.alert = function(type, icon, title, msg, path) {
				var timer = 2500;
				//
				switch (type) {
					case 'toast':
						//
						const Toast = Swal.mixin({
							toast: true,
							position: 'top-end',
							showConfirmButton: false,
							timer: timer,
							timerProgressBar: true,
							didOpen: (toast) => {
								toast.addEventListener('mouseenter', Swal.stopTimer)
								toast.addEventListener('mouseleave', Swal.resumeTimer)
							}
						})
						//
						Toast.fire({
							icon: icon,
							title: msg
						})
						break;
					case 'basic':
						Swal.fire({
							title: title,
							text: msg,
							icon: icon,
							confirmButtonText: 'ตกลง',
							confirmButtonColor: '#ff6600',
							heightAuto: false
						});
						break;
				}
				//
				if(path!=null) {
					if(path=='reload') {
						$timeout(function() {
							$window.location.reload();
						}, timer);
					}
					else {
						$timeout(function() {
							$window.location.href = path;
						}, timer);
					}
				}
			}
			//
		}
	}
}])