/**
 * (c) 2016 IP Security Consulting, all rights reserved.
 */

(function() {
	var CC = 'https://cc.moow.info';
	var JQ; // lokalne jQuery
	var ajaxChatActivePush = null;
	var lastId = 0;
	var maxChatMessageLength = 2000;
	var needToReceiveAllMessages = true;

	function loadScript(url, callback) {
		var script = document.createElement("script")
		script.type = "text/javascript";

		if (script.readyState) { // IE
			script.onreadystatechange = function () {
				if (script.readyState == "loaded" || script.readyState == "complete") {
					script.onreadystatechange = null;
					callback();
				}
			};
		} else { // Others
			script.onload = function () {
				callback();
			};
		}

		script.src = url;
		document.getElementsByTagName("head")[0].appendChild(script);
	}

	loadScript("//code.jquery.com/jquery-1.12.2.min.js", function () {
		JQ = jQuery.noConflict(true);

		JQ.ajax({
			type: 'POST',
			url: CC + '/frontend/chat/chat-init.php',
			xhrFields: { withCredentials: true },
			async: true,
			cache: false,
			data: { referer: window.location.origin + window.location.pathname + window.location.search },
			dataType: 'json',
		}).done(function (response) {
			if (response.warning) {
				console.log(response.warning);
				return false;
			}

			JQ('body').append('\
				<div id="ipsec-web-chat-overall-wrapper">\
				<div id="ipsec-web-chat-image-container">\
				</div>\
				<div id="ipsec-web-chat" class="ipsec-web-chat-card ipsec-web-chat-card-2">\
					<div id="ipsec-web-chat-title-container">\
						<div id="ipsec-web-chat-title"><b>' + response.chat_title + '</b></div>\
					</div>\
					<div id="ipsec-web-chat-inner-container" style="display:none">\
						<div id="ipsec-web-chat-warning-container" style="display:none !important">\
							<div class="ipsec-web-chat-warning"></div>\
						</div>\
						<div id="ipsec-web-chat-customer-details">\
							<input maxLength="255" class="ipsec-web-chat-card ipsec-web-chat-md-input" id="ipsec-web-chat-name" type="text" placeholder="' + response.chat_hint_name + '" required/>\
							<input class="ipsec-web-chat-card ipsec-web-chat-md-input" id="ipsec-web-chat-email" type="email" placeholder="' + response.chat_hint_email + '" required/>\
						</div>\
						<div id="ipsec-web-chat-content" style="display:none">\
							<div id="ipsec-web-chat-conversation"></div>\
						</div>\
						<div id="ipsec-web-chat-msg-form">\
							<textarea class="ipsec-web-chat-md-textarea" id="ipsec-web-chat-msg" placeholder="' + response.chat_hint_msg + '" required></textarea>\
							<input class="ipsec-web-chat-md-button" id="ipsec-web-chat-button" type="button" value="' + response.chat_msg_send_btn + '" />\
						</div>\
					</div>\
				</div>\
				</div>\
				<style type="text/css">\
					.ipsec-web-chat-hidden {\
						display: none !important;\
					}\
					.ipsec-web-chat-card {\
						border-radius: 2px !important;\
						color: #000000 !important;\
					}\
					.ipsec-web-chat-card-1 {\
						box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;\
					}\
					.ipsec-web-chat-card-2 {\
						box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;\
					}\
					.ipsec-web-chat-md-button {\
						position: relative !important;\
						overflow: hidden !important;\
						border: none !important;\
						cursor: pointer !important;\
						color: white !important;\
						padding: 0.5em !important;\
						border-radius: 2px !important;\
						font-size: 18px !important;\
						text-align: center !important;\
						box-shadow: 2px 2px 4px rgba(0, 0, 0, .4) !important;\
						background: #2196F3 !important;\
					}\
					.ipsec-web-chat-md-button:after {\
						content: "";\
						position: absolute !important;\
						top: 50% !important;\
						left: 50% !important;\
						width: 5px !important;\
						height: 5px !important;\
						background: rgba(255, 255, 255, .5) !important;\
						opacity: 0 !important;\
						border-radius: 100% !important;\
						transform: scale(1, 1) translate(-50%) !important;\
						transform-origin: 50% 50% !important;\
					}\
					.ipsec-web-chat-md-input {\
						margin-bottom: 0.5em !important;\
						margin-top: 0.5em !important;\
						padding-left: 0.5em !important;\
						border: 1px solid #E6E6E6 !important;\
						background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #2196F3 4%) !important;\
					}\
					.ipsec-web-chat-md-input:invalid, .ipsec-web-chat-md-input:required:invalid {\
						background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #F44336 4%) !important;\
					}\
					.ipsec-web-chat-md-input:required:valid {\
						background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #4CAF50 4%) !important;\
					}\
					.ipsec-web-chat-md-textarea:invalid, .ipsec-web-chat-md-textarea:required:invalid {\
						background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #F44336 4%) white !important;\
					}\
					.ipsec-web-chat-md-textarea:required:valid {\
						background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #4CAF50 4%) white !important;\
					}\
					.ipsec-web-chat-md-textarea {\
						width: 100% !important;\
						margin-bottom: 0.5em !important;\
						margin-top: 0.5em !important;\
						padding: 0.5em !important;\
						border: 1px solid #e6e6e6 !important;\
						background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, #2196F3 4%) white !important;\
					}\
					.ipsec-web-chat-md-input:focus, .ipsec-web-chat-md-input:valid, .ipsec-web-chat-md-textarea:focus, .ipsec-web-chat-md-textarea:valid {\
						box-shadow: none !important;\
						outline: none !important;\
						background-position: 0 0 !important;\
					}\
					#ipsec-web-chat-image {\
						position: fixed !important;\
						bottom: ' + response.chat_img_bottom + 'px !important;\
						z-index: 1000 !important;\
						width: ' + response.chat_img_width + 'px !important;\
						cursor: pointer !important;\
					}\
					#ipsec-web-chat{\
						position: fixed !important;\
						bottom: ' + response.chat_bottom + 'px !important;\
						z-index: 1000 !important;\
						width: ' + response.chat_width + 'px !important;\
					}\
					#ipsec-web-chat-warning-container {\
						display: flex !important;\
						flex-wrap: wrap !important;\
						justify-content: center !important;\
						background-color: #FFFFFF !important;\
						padding: 0.5em !important;\
					}\
					.ipsec-web-chat-warning {\
						width: 100% !important;\
						padding: 0.5em !important;\
						box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) !important;\
						word-wrap: break-word !important;\
						border-radius: 2px !important;\
						margin-bottom: 0.5em !important;\
						background-color: ' + response.chat_warning_bg_color + ' !important;\
						color: ' + response.chat_warning_text_color + ' !important;\
					}\
					#ipsec-web-chat-name, #ipsec-web-chat-email {\
						height: 3em !important;\
						width: 100% !important;\
					}\
					#ipsec-web-chat-name::placeholder {\
						height: 3em !important;\
						width: 100% !important;\
						color: #232323 !important;\
					}\
					#ipsec-web-chat-email::placeholder {\
						height: 3em !important;\
						width: 100% !important;\
						color: #232323 !important;\
					}\
					#ipsec-web-chat-title-container {\
						cursor: pointer !important;\
						padding: 1em !important;\
						text-align: center !important;\
						background-color: ' + response.chat_title_bg_color + ' !important;\
						color: ' + response.chat_title_text_color + ' !important;\
					}\
					#ipsec-web-chat-customer-details {\
						display: flex !important;\
						flex-wrap: wrap !important;\
						justify-content: center !important;\
						background-color: ' + response.chat_content_bg_color + ' !important;\
						padding: 0.5em !important;\
					}\
					#ipsec-web-chat-customer-details input {\
						background-color: #FFFFFF !important;\
					}\
					#ipsec-web-chat-content {\
						display: none !important;\
						height: 20em !important;\
						max-height: 20em !important;\
						padding: 0.5em !important;\
						overflow-x: hidden !important;\
						overflow-y: auto !important;\
						background-color: ' + response.chat_content_bg_color + ' !important;\
					}\
					#ipsec-web-chat-msg-form {\
						display: flex !important;\
						flex-wrap: wrap !important;\
						justify-content: center !important;\
						padding: 0.5em !important;\
						background-color: ' + response.chat_msg_form_bg_color + ' !important;\
					}\
					#ipsec-web-chat-attachment-icon {\
						text-align: right !important;\
						width: 100% !important;\
					}\
					#ipsec-web-chat-attachment-icon img {\
						cursor: pointer;\
					}\
					#ipsec-web-chat-msg {\
						height: 5em !important;\
						resize: none !important;\
					}\
					#ipsec-web-chat-msg::placeholder {\
						height: 5em !important;\
						resize: none !important;\
						color: #232323 !important;\
					}\
					#ipsec-web-chat-conversation .incoming {\
						width: 90% !important;\
						float: left !important;\
						padding: 0.5em !important;\
						box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;\
						word-wrap: break-word !important;\
						border-radius: 2px !important;\
						margin-bottom: 0.5em !important;\
						background-color: ' + response.chat_msg_in_bg_color + ' !important;\
						color: ' + response.chat_msg_in_text_color + ' !important;\
						transform: translateX(-110%);\
						-o-transform: translateX(-110%);\
						-ms-transform: translateX(-110%);\
						-moz-transform: translateX(-110%);\
						-webkit-transform: translateX(-110%);\
						animation: slide-in 0.5s forwards;\
						-o-animation: slide-in 0.5s forwards;\
						-ms-animation: slide-in 0.5s forwards;\
						-moz-animation: slide-in 0.5s forwards;\
						-webkit-animation: slide-in 0.5s forwards;\
					}\
					#ipsec-web-chat-conversation .outgoing {\
						width: 90% !important;\
						float: right !important;\
						padding: 0.5em !important;\
						box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12) !important;\
						word-wrap: break-word !important;\
						border-radius: 2px !important;\
						margin-bottom: 0.5em !important;\
						background-color: ' + response.chat_msg_out_bg_color + ' !important;\
						color: ' + response.chat_msg_out_text_color + ' !important;\
						transform: translateX(110%);\
						-o-transform: translateX(110%);\
						-ms-transform: translateX(110%);\
						-moz-transform: translateX(110%);\
						-webkit-transform: translateX(110%);\
						animation: slide-in 0.5s forwards;\
						-o-animation: slide-in 0.5s forwards;\
						-ms-animation: slide-in 0.5s forwards;\
						-moz-animation: slide-in 0.5s forwards;\
						-webkit-animation: slide-in 0.5s forwards;\
					}\
					#ipsec-web-chat-conversation .attachment {\
						background: url(' + response.chat_icon_attachment + ') left center no-repeat;\
						padding-left: 20px;\
					}\
					#ipsec-web-chat-conversation .incoming .attachment a {\
						color: ' + response.chat_msg_in_text_color + ' !important;\
						text-decoration: none;\
					}\
					#ipsec-web-chat-conversation .outgoing .attachment a {\
						color: ' + response.chat_msg_out_text_color + ' !important;\
						text-decoration: none;\
					}\
					#ipsec-web-chat-conversation p {\
						margin-bottom: 0.3em !important;\
						margin-top: 0.1em !important;\
					}\
					#ipsec-web-chat-button {\
						width: 100% !important;\
						background-color: ' + response.chat_msg_send_btn_bgcolor + ' !important;\
						color: ' + response.chat_msg_send_btn_textcolor + ' !important;\
					}\
					.pulse {\
						animation: pulse 1s infinite;\
					}\
					@keyframes pulse {\
						0% {\
							background-color: #FFC107;\
						}\
						50% {\
							background-color: #FF5722;\
						}\
						100% {\
							background-color: #FFC107;\
						}\
					}\
					@-o-keyframes pulse {\
						0% {\
							background-color: #FFC107;\
						}\
						50% {\
							background-color: #FF5722;\
						}\
						100% {\
							background-color: #FFC107;\
						}\
					}\
					@-ms-keyframes pulse {\
						0% {\
							background-color: #FFC107;\
						}\
						50% {\
							background-color: #FF5722;\
						}\
						100% {\
							background-color: #FFC107;\
						}\
					}\
					@-moz-keyframes pulse {\
						0% {\
							background-color: #FFC107;\
						}\
						50% {\
							background-color: #FF5722;\
						}\
						100% {\
							background-color: #FFC107;\
						}\
					}\
					@-webkit-keyframes pulse {\
						0% {\
							background-color: #FFC107;\
						}\
						50% {\
							background-color: #FF5722;\
						}\
						100% {\
							background-color: #FFC107;\
						}\
					}\
					@keyframes slide-in {\
						100% { transform: translateX(0%); }\
					}\
					@-o-keyframes slide-in {\
						100% { transform: translateX(0%); }\
					}\
					@-ms-keyframes slide-in {\
						100% { transform: translateX(0%); }\
					}\
					@-moz-keyframes slide-in {\
						100% { -webkit-transform: translateX(0%); }\
					}\
					@-webkit-keyframes slide-in {\
						100% { -webkit-transform: translateX(0%); }\
					}\
					</style>\
			');

			if (response.chat_img_enabled === 'true') {
				JQ('#ipsec-web-chat-image-container').append('<img id="ipsec-web-chat-image" src="' + response.chat_img_src + '" />')
			}

			if (response.chat_position === 'left') {
				JQ('#ipsec-web-chat').css('left', response.chat_left + 'px');
				JQ('#ipsec-web-chat-image').css('left', response.chat_img_left + 'px');
			} else if (response.chat_position === 'right') {
				JQ('#ipsec-web-chat').css('right', response.chat_right + 'px');
				JQ('#ipsec-web-chat-image').css('right', response.chat_img_right + 'px');
			}

			if (response.session_user_name != null) {
				JQ('#ipsec-web-chat-name').val(response.session_user_name);
			}

			if (response.session_user_email != null) {
				JQ('#ipsec-web-chat-email').val(response.session_user_email);
			}

			JQ('#ipsec-web-chat-title-container, #ipsec-web-chat-image').click(function () {
				JQ('#ipsec-web-chat-inner-container').slideToggle();
				JQ('#ipsec-web-chat-title-container').removeClass('pulse')

				if (response.chat_img_enabled) {
					JQ('#ipsec-web-chat-image').fadeToggle();
				}

				JQ('#ipsec-web-chat-content').scrollTop(JQ('#ipsec-web-chat-content')[0].scrollHeight);
			});


			JQ('#ipsec-web-chat-msg').on('keyup', function(e) {
				stripChatMessage();
				if (e.which == 13 && ! e.shiftKey) {
					JQ('#ipsec-web-chat-button').click();
				}
			});

			JQ('#ipsec-web-chat-button').click(function () {
				sendChatMessage();
			});

			if (response.is_active_now)
				JQ('#ipsec-web-chat-overall-wrapper').show();
			else
				JQ('#ipsec-web-chat-overall-wrapper').hide();
			response.deactivate_after_seconds.forEach(function(val) {
				setTimeout(function() {
					const repeater = function() {
						JQ('#ipsec-web-chat-overall-wrapper').hide();
					};
					setInterval(repeater, 1000*3600*24);
					repeater();
				}, val * 1000);
			});
			response.activate_after_seconds.forEach(function(val) {
				setTimeout(function() {
					const repeater = function() {
						JQ('#ipsec-web-chat-overall-wrapper').show();
					};
					setInterval(repeater, 1000*3600*24);
					repeater();
				}, val * 1000);
			});


			if (response.conversation_is_ongoing && needToReceiveAllMessages)
				receiveChatMessage();
		});
	});

	function sendChatMessage() {
		if (JQ('#ipsec-web-chat-button').prop('disabled'))
			return;
		JQ('#ipsec-web-chat-button').prop('disabled', false);
		stripChatMessage();

		var name	= JQ('#ipsec-web-chat-name').val();
		var email	= JQ('#ipsec-web-chat-email').val();
		var msg		= JQ('#ipsec-web-chat-msg').val();

		if (name === undefined)		name = '';
		if (email === undefined)	email = '';

		if (name == '' && email == '') {
			alert('Prepáčte, ale musíte zadať meno alebo e-mail');
			return false;
		}

		msg = msg.replace(/^\s+|\s+$/g, '');

		if (msg == '')
			return;

		JQ.ajax({
			type: 'POST',
			url: CC + '/frontend/chat/chat-send.php',
			xhrFields: { withCredentials: true },
			async: true,
			data: {
				referer: window.location.origin + window.location.pathname + window.location.search,
				name:	name,
				email:	email,
				msg:	msg,
			},
			dataType: 'json',
		}).done(function (response) {
			if (needToReceiveAllMessages)
				receiveChatMessage();
			JQ('#ipsec-web-chat-button').prop('disabled', false);
			if (response.warning) {
				JQ('.ipsec-web-chat-warning').html(response.warning);
				JQ('#ipsec-web-chat-warning-container')[0].style.setProperty('display', 'flex', 'important');
				return false;
			}
			JQ('#ipsec-web-chat-warning-container')[0].style.setProperty('display', 'none', 'important');
			// JQ('#ipsec-web-chat-conversation').append(response.conversation);
			JQ('#ipsec-web-chat-msg').val('');
			JQ('#ipsec-web-chat-customer-details')[0].style.setProperty('display', 'none', 'important');
			JQ('#ipsec-web-chat-content')[0].style.setProperty('display', 'block', 'important');
			JQ('#ipsec-web-chat-content').scrollTop(JQ('#ipsec-web-chat-content')[0].scrollHeight);
			return true;
		}).fail(function() {
			JQ('#ipsec-web-chat-button').effect('shake').prop('disabled', false);
		});
	}

	function stripChatMessage() {
		msg = JQ('#ipsec-web-chat-msg').val();
		if (msg.length > maxChatMessageLength)
			JQ('#ipsec-web-chat-msg').val(msg.substr(0, maxChatMessageLength));
	}

	function sendChatAttachment(attachment) {
	}

	function receiveChatMessage() {
		const allMessages = needToReceiveAllMessages;
		needToReceiveAllMessages = false;
		setTimeout(
			function() {
				doReceiveChatMessage(allMessages);
			},
			1000
		);
	}

	function doReceiveChatMessage(allMessages) {
		ajaxChatActivePush = JQ.ajax({
			type: 'POST',
			url: CC + '/frontend/chat/chat-receive.php',
			xhrFields: { withCredentials: true },
			async: true,
			data: {
				referer: window.location.origin + window.location.pathname + window.location.search,
				id:	lastId,
				all:	allMessages ? 'yes' : 'no',
			},
			dataType: 'json',
		}).done(function (response) {
			if (response.warning) {
				lastId = response.id;
				JQ('.ipsec-web-chat-warning').html(response.warning);
				JQ('#ipsec-web-chat-warning-container')[0].style.setProperty('display', 'flex', 'important');
				if (ajaxChatActivePush != null)
					ajaxChatActivePush = null;
				receiveChatMessage();
				return false;
			}

			if (response.hasOwnProperty('conversation') && response.conversation != '') {
				JQ('#ipsec-web-chat-warning-container')[0].style.setProperty('display', 'none', 'important');
				JQ('#ipsec-web-chat-customer-details')[0].style.setProperty('display', 'none', 'important');
				JQ('#ipsec-web-chat-conversation').append(response.conversation);
				JQ('#ipsec-web-chat-content')[0].style.setProperty('display', 'block', 'important');
				JQ('#ipsec-web-chat-content').scrollTop(JQ('#ipsec-web-chat-content')[0].scrollHeight);
				JQ('#ipsec-web-chat-title-container').addClass('pulse')
				lastId = response.id;
			}

			if (ajaxChatActivePush != null)
				ajaxChatActivePush = null;
			receiveChatMessage();
			return true;
		}).fail(function () {
			receiveChatMessage();
			return true;
		});
	}
})();