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

angular.module('PromptSkill.enrols', [])

.directive('enrol', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			element.addClass('timeline-state');
			attrs.$observe('enrol', function(course) {
				if(course) {
					// console.log(course)
					var navi = [];
					var code = undefined;
					var price = undefined;
					// var coupon = [];
					scope.service.program.state('enrol').then(function(state) {
						//
						navi = Object.keys(state.enrol);
						angular.forEach(state.enrol, function(text, key) {
							var $state = $('<div/>').addClass('line-progress');//.addClass(done);
							var $milestone = $('<div/>').addClass('milestone normal');//.addClass(done);
							$state.append($milestone)
							$('<span/>').addClass('medium').attr('data-text', scope.$eval("'"+text+"' | phrase:locale")).appendTo($milestone);
							//
							element.append($state);
						});
					});
					//
					scope.$watch('enrol.state', function(curState, state) {
						// console.log(curState)
						// console.log(navi)
						if(scope.enrol !=undefined) {
							code = scope.enrol.code;
							price = scope.enrol.price ?? scope.enrol.course[0].discounted_price ?? scope.enrol.course[0].price;
						}
						console.log(scope.enrol)
						scope.service.course.enrol(course, curState, code, price).then(function(enrol) {
							// console.log(enrol)
							scope['enrol'] = enrol;
							// coupon = enrol.course[0].coupon;
							// console.log(coupon)
							var step = navi.indexOf(enrol.state);
							var $states = element.find('.line-progress');
							// console.log($states)
							for(var i=0; i<=step; i++) {
								$($states[i]).addClass('red').children('.milestone').addClass('red');
							}
						});
					});
					//
					scope.checkCoupon = function() {
						var code = $('#coupon_code').val();
						code = code.toUpperCase();
						// console.log(code.toUpperCase())
						scope.service.course.coupon(course, code).then(function(coupon) {
							// console.log(coupon)
							// scope.enrol['price'] = scope.enrol.course[0].price;
							if(code == coupon.code) {
								scope.alert('Reward Activated','','success');
								var price_unit = scope.enrol.course[0].price_unit;
								
								if(coupon.free_coupon == '0'){
									scope.enrol['price'] = scope.enrol.course[0].price - coupon.amount;
									// console.log('price1: '+price)
									if(scope.enrol.course[0].discounted) {
										scope.enrol['price'] = scope.enrol.course[0].discounted_price - coupon.amount;
										// console.log('price2: '+price)
									}
								}else{
									scope.enrol['price'] = 0;
									// console.log('price3: '+price)
								}
								
								
								scope.enrol['code'] = code;
								var price = scope.$eval("'"+scope.enrol.price+"' | price:enrol.course[0].price_unit")
								// console.log(price)
								$('.course-price h1').text(price);
								// $('.course-price h1').addClass('line-through');
								$('.coupon').remove();
								// console.log(scope.enrol)						
							} else {
								scope.alert('','The coupon code you entered couldn\'t be applied to any items in your order.','error');
								// console.log($('.course-price h1'))
							}
						});
						
						// if(code === coupon.code) {
						// 	scope.alert('Reward Activated','','success');
						// 	// console.log(scope.enrol.course[0])
						// 	var price_unit = scope.enrol.course[0].price_unit;
						// 	var price = scope.enrol.course[0].price - coupon.amount;
						// 	if(scope.enrol.course[0].discounted) {
						// 		price = scope.enrol.course[0].discounted_price - coupon.amount;
						// 	}
						// 	scope.enrol['code'] = code;
						// 	price = scope.$eval("'"+price+"' | price:enrol.course[0].price_unit")
						// 	// console.log(price)
						// 	$('.course-price h1').text(price);
						// 	// $('.course-price h1').addClass('line-through');
						// 	$('.coupon').remove();
						// 	// console.log(scope.enrol)						
						// } else {
						// 	scope.alert('','The coupon code you entered couldn\'t be applied to any items in your order.','error');
						// 	// console.log($('.course-price h1'))
						// }
					}
				}
			});
			scope.alert = function(title,text,icon) {
				Swal.fire({
					title: title,
					text: text,
					icon: icon,
					confirmButtonText: 'OK',
					confirmButtonColor: "#EB3124",
					heightAuto: false
				})
			}
		}
	}
}])

.directive('enrolState', [function() {
	return {
		restrict: 'A',
		template: '<div ng-include="stateUrl"></div>',
		//scope: false,
		link: function(scope, element, attrs)
		{
			// console.log(scope.enrol)
			element.css('min-height', '16em').css('margin-bottom', '0.25em');
			scope.$watch('enrol.state', function (enrolState, old) {
				if (enrolState !==old) {
					scope.enrol.state = enrolState;
					if(scope.enrol.state=='payment') {
						enrolState += '-' + scope.enrol.method;
						//
						scope.enrolPayment = function() {
							// console.log($('#btn-payment'))
							// console.log(scope.enrol.order.order_id)
							$('#btn-payment').addClass('disabled').text(scope.$eval("'Paying'|phrase:locale"));
							
							const eventSource = new EventSource('//cms.promptskill.com/restapi/user/payment/'+scope.enrol.order.order_id);
							eventSource.onmessage = function(event) {
								const response = event.data;
								// console.log(response);
								if(response=='paid') {
									scope.$apply(function() {
										scope.enrol.state = scope.enrol.navigator.next;
										eventSourceClosed();
									});
								}
							};
							eventSource.onerror = function(error) {
								// console.error('EventSource failed:', error);
							};
							scope.$on('$destroy', function() {
								eventSourceClosed();
							});
							
							function eventSourceClosed() {
								eventSource.close();
								console.log("Event Source Closed");
							}
							
							// scope.service.user.payment(scope.enrol.order.order_id).then(function(result) {
							// 	console.log(result);
							// 	// if(result=='paid') {
							// 	// 	scope.enrol.state = scope.enrol.navigator.next;	
							// 	// }
							// });
						}
					}
					scope.stateUrl = '/templates/blocks/enrol-'+enrolState+'.promptskill';
				}
			});
		},
	} 
}])

.directive('enrolNavigator', ['$window', function($window) {
	return {
		restrict: 'A',
		link: function(scope, element, attrs)
		{
			// console.log('enrolNavigator')
			scope.enrolUpdate = function() {
				var confirm = true;
				if(scope.enrol.state=='info') {
					//scope.enroll.info = {}
					angular.forEach(angular.element('form'), function(form) {
						//console.log(form.id)
						scope.enrol[form.id] = {}
						angular.forEach(angular.element(form).find('fieldset'), function(fieldset, key) {
							scope.enrol[form.id][key] = {}
							angular.forEach(angular.element(fieldset).find('input'), function(input) {
								var data = {};
								data['text'] = angular.element(input).next('label').text();
								if(angular.element(input).val()=='' && !angular.element(input).prop('disabled')) {
									angular.element(input).addClass('invalid');
									confirm = false;
								}
								data['value'] = angular.element(input).val();
								//console.log(data)
								scope.enrol[form.id][key][input.id] = data;
							});
						});
					});
					console.log(scope.enroll)
				}
				scope.enrol.back = false;
				//console.log(scope.formdata)
				if(confirm) {
					scope.enrol.state = scope.enrol.navigator.next;
				}
			}
			//
			scope.enrolConfirm = function() {
				// console.log(scope.enrol)
				scope.service.user.confirm(scope.enrol).then(function(data) {
					//console.log(data)
					scope.enrol.back = false;
					scope.enrol.state = scope.enrol.navigator.confirm;
				});
			}
			//
			scope.enrolBack = function() {
				//scope.service.user.enrolBack()
				scope.enrol.back = true;
				scope.enrol.state = scope.enrol.navigator.back;
			}
			//
			// scope.enrolCancle = function() {
			// 	console.log(scope.enrol.order);
			// 	//scope.service.user.enrolBack()
			// 	// if(scope.enrol.order) {
			// 	// 	scope.enrol.state = 'cancle';
			// 	// }
			// 	$window.location.href = "/course/"+scope.course.code;
			// }
			//
			scope.enrolCancel = function() {
				// console.log(scope.enrol.order);
				//scope.service.user.enrolBack()
				// if(scope.enrol.order) {
				// 	scope.enrol.state = 'cancle';
				// }
				$window.location.href = "/course/"+scope.course.code;
			}
		}
	}
}])