// Based on blog post: https://www.sitepoint.com/how-to-build-your-own-ai-assistant-using-api-ai/
// Source code: https://github.com/sitepoint-editors/Api-AI-Personal-Assistant-Demo/blob/master/index.html.
// Demo: https://devdiner.com/demos/barry/

// When ready :)

function detectmob() { 
	if( navigator.userAgent.match(/Android/i)
	|| navigator.userAgent.match(/webOS/i)
	|| navigator.userAgent.match(/iPhone/i)
	|| navigator.userAgent.match(/iPad/i)
	|| navigator.userAgent.match(/iPod/i)
	|| navigator.userAgent.match(/BlackBerry/i)
	|| navigator.userAgent.match(/Windows Phone/i)
	){
		 return true;
	 }
	else {
		 return false;
	 }
 }

jQuery(document).ready(function() {

	/*
	 * When the user enters text in the text input text field and then the presses Enter key
	 */
	jQuery("input.allioc-text").keypress(function(event) {
		if (event.which == 13) {
			event.preventDefault();
			jQuery(".allioc-conversation-area .allioc-conversation-request").removeClass("allioc-is-active");

			var text = jQuery(this).val();
			var date = new Date();

			var containerId = jQuery(this).closest(".allioc-container").attr('id');
			var parts = containerId.split("-");
			var sequence = parts[2];

			var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-request\"><div class=\"allioc-conversation-bubble allioc-conversation-request allioc-is-active\">" + escapeTextInput(text) + "</div>";
			if (allioc_script_vars.show_time) {
				innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
			}
			innerHTML += "</div>";
			if (allioc_script_vars.show_loading) {
				innerHTML += "<div class=\"allioc-loading\"><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /></div>";
			}
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);
			jQuery("#allioc-container-" + sequence + " input.allioc-text").val("");
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
					.scrollTop(jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
					.prop("scrollHeight"));
			textQuery(text, sequence);
		}
	});

	jQuery("#allioc-input-area .allioc-send-button").off('click').on('click', function(e) {
		if (jQuery("input.allioc-text").val() != '') {
			jQuery(".allioc-conversation-area .allioc-conversation-request").removeClass("allioc-is-active");

				var text = jQuery("input.allioc-text").val();
				var date = new Date();

				var containerId = jQuery("input.allioc-text").closest(".allioc-container").attr('id');
				var parts = containerId.split("-");
				var sequence = parts[2];

				var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-request\"><div class=\"allioc-conversation-bubble allioc-conversation-request allioc-is-active\">" + escapeTextInput(text) + "</div>";
				if (allioc_script_vars.show_time) {
					innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
				}
				innerHTML += "</div>";
				if (allioc_script_vars.show_loading) {
					innerHTML += "<div class=\"allioc-loading\"><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /></div>";
				}
				jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);
				jQuery("#allioc-container-" + sequence + " input.allioc-text").val("");
				jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
						.scrollTop(jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
						.prop("scrollHeight"));
				textQuery(text, sequence);
		}
	});


	/* Overlay slide toggle */
	jQuery(".allioc-content-overlay .allioc-content-overlay-header").click(function(event){

		if (!jQuery(".allioc-content-logo").hasClass("opend")) { // toggle open

			var container = jQuery(this).siblings(".allioc-content-overlay-container").find(".allioc-container");

			// if welcome intent enabled and no conversation exists yet
			if (jQuery(container).find(".allioc-conversation-bubble-container").length == 0) {

				var containerId = jQuery(container).attr('id');
				var parts = containerId.split("-");
				var sequence = parts[2];

				welcomeIntent(sequence);
			}
			jQuery('.allioc-content-logo').addClass('opend');
			
			jQuery(this).parent().removeClass("allioc-toggle-closed");
			jQuery(this).parent().addClass("allioc-toggle-open");			
			jQuery(this).siblings(".allioc-content-overlay-container").slideToggle("slow", function() {});
		} else { // toggle close
			jQuery('.allioc-content-logo').removeClass('opend');			
			jQuery(this).parent().removeClass("allioc-toggle-open");
			jQuery(this).parent().addClass("allioc-toggle-closed");			
			jQuery(this).siblings(".allioc-content-overlay-container").slideToggle("slow", function() {});
		}
	});

	jQuery('.allioc-content-logo').off('click').on('click', function(e) {
		jQuery(".allioc-content-overlay .allioc-content-overlay-header").trigger('click');
	//	jQuery(this).toggleClass('opend');
	});

		/*
	 * Welcome
	 */
	if (allioc_script_vars.enable_welcome_event) {

		// show welcome intent on first chatbot only
		if ( jQuery(".allioc-container").length > 0 ) {
			var self = jQuery(".allioc-content-overlay .allioc-content-overlay-header");

			var container = jQuery(self).siblings(".allioc-content-overlay-container").find(".allioc-container");

			// if welcome intent enabled and no conversation exists yet
			if (jQuery(container).find(".allioc-conversation-bubble-container").length == 0) {

				var containerId = jQuery(container).attr('id');
				var parts = containerId.split("-");
				var sequence = parts[2];

				welcomeIntent(sequence);
			}
			jQuery('.allioc-content-logo').addClass('opend');
			
			jQuery(self).parent().removeClass("allioc-toggle-closed");
			jQuery(self).parent().addClass("allioc-toggle-open");
		
		}
	}

	if (detectmob()) {
		var h = jQuery(window).height() - jQuery('.allioc-content-overlay-header').outerHeight();
		h = h - jQuery('#allioc-input-area').outerHeight();
		jQuery('.allioc-content-overlay-container .allioc-conversation-area').css('height', h);
	}
});


/**
 * Displays welcome intent for a specific chatbot identified by sequence
 *
 * @params sequence
 */
function welcomeIntent(sequence) {
	var innerHTML = "";
	if (allioc_script_vars.show_loading) {
		innerHTML = "<div class=\"allioc-loading\"><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /></div>";
	}
	
	jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);

	jQuery.ajax({
		type : "POST",
		url : allioc_script_vars.base_url,
		dataType : "json",
		data : {
			security: allioc_script_vars.security,
			action: "query_text",
			event :"WELCOME",			
			lang : allioc_script_vars.language,
			session : allioc_script_vars.session_id,
		},
		success : function(response) {
			setTimeout(function(){
				if (allioc_script_vars.show_loading) {
					jQuery("#allioc-container-" + sequence + " .allioc-loading").empty();
				}
				prepareResponse(response,sequence);
			}, allioc_script_vars.response_delay);
		},
		error : function(response) {
			if (allioc_script_vars.show_loading) {
				jQuery("#allioc-container-" + sequence + " .allioc-loading").empty();
			}
			
			textResponse(allioc_script_vars.messages.internal_error, sequence);
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
					.scrollTop(jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
					.prop("scrollHeight"));
		}
	});

}

/**
 * Send Dialogflow query
 *
 * @param text
 * @param sequence
 * @returns
 */
function textQuery(text, sequence) {

	jQuery.ajax({
		type : "POST",
		url : allioc_script_vars.base_url,
		dataType : "json",	
		data: {
			security: allioc_script_vars.security,
			action: "query_text",
			message: text,
			lang : allioc_script_vars.language,
			session: allioc_script_vars.session_id
		},
		success : function(response) {
			setTimeout(function(){
				if (allioc_script_vars.show_loading) {
					jQuery("#allioc-container-" + sequence + " .allioc-loading").empty();
				}
				prepareResponse(response,sequence);
			}, allioc_script_vars.response_delay);

		},
		error : function(response) {
			if (allioc_script_vars.show_loading) {
				jQuery("#allioc-container-" + sequence + " .allioc-loading").empty();
			}
			textResponse(allioc_script_vars.messages.internal_error, sequence);
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
					.scrollTop(jQuery(".allioc-container-" + sequence + " .allioc-conversation-area")
					.prop("scrollHeight"));
		}
	});
}

/**
 * Handle Dialogflow response
 *
 * @param response
 * @param response
 */
function prepareResponse(response, sequence) {

	//if (response.status.code == "200" ) {

		jQuery(window).trigger("allioc_response_success", response);

		jQuery("#allioc-container-" + sequence + " .allioc-conversation-area .allioc-conversation-response").removeClass("allioc-is-active");

		var messages = response.fulfillmentMessages;
		var numMessages = messages.length;
		var index = 0;
		for (index; index<numMessages; index++) {
			var message = messages[index];

			if (allioc_script_vars.messaging_platform == message.platform
					|| allioc_script_vars.messaging_platform == "default" && message.platform === undefined
					|| message.platform === undefined && ! hasPlatform(messages, allioc_script_vars.messaging_platform) ) {
				
				if (!message.type) {
					textResponse(message.text, sequence);
				} else {
					switch (message.type) {
				    case 0: // text response
						textResponse(message.speech, sequence);
				        break;
				    case 1: // TODO card response
				        cardResponse(message.title, message.subtitle, message.buttons, message.text, message.postback, sequence);
				        break;
				    case 2: // quick replies
				    	quickRepliesResponse(message.title, message.replies, sequence);
				        break;
				    case 3: // image response
						imageResponse(message.imageUrl, sequence);
				        break;
				    case 3: // custom payload
							
				        break;
				    default:
					}
				}
				
			}
		}

	/*} else {
		textResponse(allioc_script_vars.messages.internal_error, sequence);
	}
*/
	jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
			.scrollTop(jQuery("#allioc-container-" + sequence + " .allioc-conversation-area")
			.prop("scrollHeight"));

	if (jQuery("#allioc-container-" + sequence + " #allioc-debug-data").length) {
		var debugData = JSON.stringify(response, undefined, 2);
		jQuery("#allioc-container-" + sequence + " #allioc-debug-data").text(debugData);
	}
}

/**
 * Checks if messages support a specific platform
 *
 * @param messages
 * @param platform
 * @returns {Boolean}
 */
function hasPlatform(messages, platform) {
	var numMessages = messages.length;
	var index = 0;
	for (index; index<numMessages; index++) {
		var message = messages[index];
		if (message.platform === platform) {
			return true;
		}
	}

	return false;
}

/**
 * Displays a text response
 *
 * @param text
 * @param sequence
 * @returns
 */
function textResponse(text, sequence) {
	if (!text)
		return false;
	if (text === "") {
		text = allioc_script_vars.messages.internal_error;
	}
	var date = new Date();
	if (text.text && text.text.length > 0) {
		jQuery.each(text.text, function(index, item) {
			var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-response\"><div class=\"allioc-conversation-bubble-container-response-wrapper\"><a class=\"chat-user-icon\"><img src=\"" + allioc_script_vars.user_icon + "\"></img></a><div class=\"allioc-conversation-bubble allioc-conversation-response allioc-is-active allioc-text-response\">" + item + "</div></div>";
			if (allioc_script_vars.show_time) {
				innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
			}
			innerHTML += "</div>";
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").scrollTop(100000);
		});
	} else {
		text = allioc_script_vars.messages.internal_error;
		var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-response\"><div class=\"allioc-conversation-bubble-container-response-wrapper\"><a class=\"chat-user-icon\"><img src=\"" + allioc_script_vars.user_icon + "\"></img></a><div class=\"allioc-conversation-bubble allioc-conversation-response allioc-is-active allioc-text-response\">" + text + "</div></div>";
			if (allioc_script_vars.show_time) {
				innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
			}
			innerHTML += "</div>";
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);
			jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").scrollTop(100000);
	}
	
}

/**
 * Displays a image response
 *
 * @param imageUrl
 * @param sequence
 * @returns
 */
function imageResponse(imageUrl, sequence) {
	if (imageUrl === "") {
		textResponse(allioc_script_vars.messages.internal_error, sequence)
	} else {
		// FIXME wait for image to load by creating HTML first
		var date = new Date();
		var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-response\"><div class=\"allioc-conversation-bubble allioc-conversation-response allioc-is-active allioc-image-response\"><img src=\"" + imageUrl + "\"/></div>";
		if (allioc_script_vars.show_time) {
			innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
		}
		innerHTML += "</div>";
		jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);
	}
}

/**
 * Card response
 *
 * @param title
 * @param subtitle
 * @param buttons
 * @param text
 * @param postback
 * @param sequence
 */
function cardResponse(title, subtitle, buttons, text, postback, sequence) {
	var html = "<div class=\"allioc-card-title\">" + title + "</div>";
	html += "<div class=\"allioc-card-subtitle\">" + subtitle + "</div>";
	// TODO
}

/**
 * Quick replies response
 *
 * @param title
 * @param replies
 * @param sequence
 */
function quickRepliesResponse(title, replies, sequence) {

	var html = "<div class=\"allioc-quick-replies-title\">" + title + "</div>";

	var index = 0;
	for (index; index<replies.length; index++) {
		html += "<input type=\"button\" class=\"allioc-quick-reply\" value=\"" + replies[index] + "\" />";
	}

	var date = new Date();
	var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-response\"><div class=\"allioc-conversation-bubble allioc-conversation-response allioc-is-active allioc-quick-replies-response\">" + html + "</div>";
	if (allioc_script_vars.show_time) {
		innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
	}
	innerHTML += "</div>";
	jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);

	jQuery("#allioc-container-" + sequence + " .allioc-conversation-area .allioc-is-active .allioc-quick-reply").click(function(event) {
		event.preventDefault();
		jQuery("#allioc-container-" + sequence + " .allioc-conversation-area .allioc-conversation-request").removeClass("allioc-is-active");
		var text = jQuery(this).val()
		var date = new Date();
		var innerHTML = "<div class=\"allioc-conversation-bubble-container allioc-conversation-bubble-container-request\"><div class=\"allioc-conversation-bubble allioc-conversation-request allioc-is-active\">" + escapeTextInput(text) + "</div>";
		if (allioc_script_vars.show_time) {
			innerHTML += "<div class=\"allioc-datetime\">" + date.toLocaleTimeString() + "</div>";
		}
		if (allioc_script_vars.show_loading) {
			innerHTML += "<div class=\"allioc-loading\"><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /><i class=\"allioc-icon-loading-dot\" /></div>";
		}
		innerHTML += "</div>";
		jQuery("#allioc-container-" + sequence + " .allioc-conversation-area").append(innerHTML);
		textQuery(text, sequence);
	});

}

/**
 * Custom payload
 *
 * @param payload
 */
function customPayload(payload, sequence) {

}


var entityMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

/**
 * Escapes HTML in text input
 */
function escapeTextInput(text) {
  return String(text).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}