var socket = io(CHAT_SERVER_URL);

/* ---------------------------------------------------
 * Socket Connect/Disconnect
 * --------------------------------------------------- */

socket.on('connect', function (){
	// socketが接続されたらチャット画面で画面を更新する
	jQuery('.overlay').removeClass('active undismissable');
	// loadingIndicatorを表示
	CHAT_UI.showLoadingIndicator();
	// チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す
	if (CHAT_UTIL.isIOS()) {
		webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
	} else if (CHAT_UTIL.isAndroid()) {
		android.getLoginParameter();
	}
});

socket.on('disconnect', function (){
	//socketが切断されたら黒画面で画面を更新する
	jQuery('.overlay').addClass('active undismissable');
	//alert('Disconnected from the server');
	CHAT_UI.dismissLoadingIndicator();
});

socket.on('connect_error', function (){
//	jQuery('.overlay').addClass('active undismissable');
	// #36174
//	$("#customAlertTitle").text(getLocalizedString("errorConnect"));
//	$("#customAlertOk").text(getLocalizedString("yesTitle"));
//
//	$('#customAlert').appendTo("body").modal({
//		backdrop: 'static',
//		keyboard: false
//	})
//	.on('click', '#customAlertOk', function(e) {
//	});
	CHAT_UI.dismissLoadingIndicator();
});

/* ----------------------------------------------------------------------
 *
 * Chat Room List Tab
 *
 * ---------------------------------------------------------------------- */

// Update Room List
socket.on('refreshRoomList', function(rooms, activeRoomId = null){
	CHAT.globalIsInvite = false;
	// チャットルームリストを削除する
	jQuery('#room_list').html('');

	// #36146に対応
	let roomListTitle = getLocalizedString("roomListTitle")
	$('.titleRoomName').text(roomListTitle)

	let keywordSearchMode = false;
	if(jQuery('#roomKeyword').val().length > 0) {
		keywordSearchMode = true;
	}

	if (rooms.length === 0) {
		// #36146に対応
		// 検索結果がない場合のメッセージを追加
		if (!keywordSearchMode) {
			let emptyListString = getLocalizedString("roomListEmptyString")
			jQuery('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
		} else {
			let emptyListString = getLocalizedString("searchRoomListEmptyString")
			jQuery('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
		}
	}

	// チャットルームの様式を読み込む
	const template = jQuery('#room-template').html();

	rooms.forEach( function(room) {
		room.profileImagePath = ASSET_PATH + 'images/user-profile.png'

		if (room.message) {
			room.message = room.message.toString()
		} else {
			room.message = getLocalizedString("noMessages")
		}

		let html = Mustache.render(template, {
			roomName: room.roomName,
			roomId: room.roomId,
			profileImage: room.profileImagePath,
			active: activeRoomId === room.roomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
			lastMessage: room.message.includes('<img') ? getLocalizedString("image") : (keywordSearchMode ? `${room.message}${getLocalizedString("searchResult")}` : room.message) ,
			time: room.time ? CHAT_UTIL.formatDate(room.time.time).createdAt : '',
			unreadMsgCnt: room.unreadCnt,
			userCnt: room.userCnt
		});

		// Click event
		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
			if (activeRoomId === room.roomId) {
				// 既存チャットルームをタッチする場合、チャット画面に遷移
				jQuery('#pills-chat-tab').tab('show');
			} else {
				// loadingIndicatorを表示しない
				CHAT_UI.showLoadingIndicator();
				// 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行
				socket.emit('joinRoom', room.roomId, room.roomName, function (){
					CHAT.saveRoomInfo(room.roomId, room.roomName);
					jQuery('#messages').html('');
					// チャットルーム名を変更する
					jQuery('.titleRoomName').text(room.roomName).data('roomName', room.roomName);
				});
			}
		});
		// チャットルームリストに追加する
		jQuery('#room_list').append(obj);
	});

	// #36146に対応
	if(rooms.length > 0) {
		if(!keywordSearchMode) {
			$(".roomListIcon").show()
			$('#roomDeleteButton, #arrangeRooms').show()
		} else {
			$(".roomListIcon").show()
			$('#roomDeleteButton, #arrangeRooms').hide()
		}
	} else {
		if(!keywordSearchMode) {
			$(".roomListIcon").hide()
		} else {
			$(".roomListIcon").show()
			$('#roomDeleteButton, #arrangeRooms').hide()
		}
	}

	jQuery('#createChatRoom').show()

	// Rotate
	if(CHAT_UI.isLandscapeMode()) {
		$(".chat_list").removeClass("col-12").addClass("col-6");
	}

	jQuery("#userSelectionDeleteBtn").hide();
	// チャットルームリスト画面に遷移
	jQuery('#pills-chatlist-tab').tab('show');

	// loadingIndicatorを表示しない
	CHAT_UI.dismissLoadingIndicator();
});

// New Message
// #36170
socket.on('newMessage', function (message, roomId, roomName){
	let template = jQuery('#message-template').html();
	if (message.id === socket.id) {
		// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
		template = jQuery('#message-template-me').html();
	}
	let messageTime = CHAT_UTIL.formatDate(message.createdAt);

	 message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
	 try {
		 message.text = decodeURIComponent(message.text)
	 } catch(e) {
		 message.text = message.text
	 }

	 let html = Mustache.render(template, {
		 text: message.text,
		 from: message.from,
		 profileImage: message.profileImagePath,
		 createdAtDay: messageTime.createdAtDay,
		 createdAtTime: messageTime.createdAtTime
	 });
	 // イメージの場合、img tagを追加する
	 html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
	 jQuery('#messages').append(html);

	 // 画像、動画の描画を待ってからスクロール
	setTimeout(function () {
		CHAT_UI.scrollToBottom();
	}, 1500);
});

// Notification
socket.on('newNotification', function(keyword, event){
	var notificationString = getLocalizedString(event, keyword)
	jQuery('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp();
});

// 新しいメッセージを受信する場合の処理
// #36170
socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
	let jQueryMessages = jQuery('#messages');
	// スクロールの変化を防ぐため以前画面の高さを保存する
	let beforeHeight = jQueryMessages.prop('scrollHeight');
	// メッセージ文字列の生成
	let workVal = "";
	messages.forEach(function(message) {
		let template = jQuery('#message-template').html();
		if (message.shopMemberId == shopMemberId) {
			 template = jQuery('#message-template-me').html();
		}
		let messageTime = CHAT_UTIL.formatDate(message.time.time);

		if(users != undefined) {
			let user = users.find((user) => user.loginId == message.loginId)

			// userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
			if(user) {
				 message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
			} else {
				 message.profileImagePath = CHAT.getProfileImgUrl("")
			}
		} else {
			message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
		}
		 // #36147
		 message.message = message.message.toString();
		 let html = Mustache.render(template, {
			 text: message.message,
			 from: message.loginId,
			 profileImage: message.profileImagePath,
			 createdAtDay: messageTime.createdAtDay,
			 createdAtTime: messageTime.createdAtTime
		 });
		html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
		workVal = html + workVal;
	})

	// メッセージの画面描画
	jQueryMessages.prepend(workVal);
	if (beforeHeight !== 0) {
		// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
		setTimeout(function () {
			jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
		}, 400);
	} else {
		// 新規に入室の場合は最下部へスクロール
		CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
		// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
		if ($(window).height() > jQueryMessages.height()) {
			jQuery('#messages').scroll();
		}
	}

	// ユーザ削除ボタン表示しない
	jQuery("#userSelectionDeleteBtn").hide();

	CHAT_UI.dismissLoadingIndicator();// add some...

	// チャットに遷移する
	jQuery('#pills-chat-tab').tab('show');
});

// Update User List In Room
// サイドバーのユーザーリストアップデート。
socket.on('updateUserList', function(users, onlineUsers){
	if (users.length > 0) {
		jQuery('#users').removeData();
		jQuery('#users').data(users);
	} else {
		const data = jQuery('#users').data();
		if(data && Object.keys(data).length > 0){
			 users = Object.keys(data).map(function(key) {
				 return data[key];
			});
		}
	}

	const ul = jQuery('<ul/>', {class: 'list-unstyled components'});
	// ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。
	let inviteString = getLocalizedString("inviteUsersButton")

	ul.append(jQuery('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event){
		jQuery('#dismiss').click();
		// loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();
		let isInvite = true;
		CHAT.globalIsInvite = isInvite;
		socket.emit('getGroupList', isInvite);
	}));

	// ユーザーリストを入れる
	users.forEach(function (user){
		 let li = jQuery('<li/>');
		 let a = jQuery('<a/>').text(user);
		 if (onlineUsers.includes(user)) {
		 // 接続されているユーザにバッジを付ける。
		 a.append(jQuery('<span/>',{class:'badge badge-success'}).text('online'));
		}
		li.append(a);
		ul.append(li);
	});
jQuery('#users').html(ul);
});

// Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite){
	jQuery('#group_list').html('');
	const template = jQuery('#group-template').html();
	if (groups.length === 0) {
		jQuery('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
	}
	// グループ名と人数を表記する。
	groups.forEach( function(group) {
		let html = Mustache.render(template, {
			name: group.groupName,
			info: group.memberCnt + getLocalizedString("people")
		});
		// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
			// loadingIndicatorを表示
			CHAT_UI.showLoadingIndicator();
			socket.emit('getUserListInGroup', group.groupId, isInvite);
			jQuery('#groupName').text(group.groupName);
		});
		jQuery('#group_list').append(obj);
	});

	// Rotate
	if(CHAT_UI.isLandscapeMode()) {
		jQuery(".group_list").addClass("col-6").removeClass("col-12");
	}

	// Set Title
	let memberSelectTitle = getLocalizedString("inviteUsersTitle")

	jQuery('#pills-group-tab').tab('show');

	jQuery('#backButton').show();

	if (isInvite) {
		jQuery('.titleRoomName').text(memberSelectTitle);
		jQuery('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
		jQuery('#userSelectionConfirmBtn').show();
		jQuery("#userSelectionConfirmBtn").off().on('click', function(){
			CHAT_UI.setConfirmButtonEvent(isInvite);
		});
	} else {
		jQuery('.titleRoomName').text(memberSelectTitle);
		jQuery('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
		jQuery('#userSelectionConfirmBtn').show();
		jQuery("#userSelectionConfirmBtn").off().on('click', function(){
			CHAT_UI.setConfirmButtonEvent(isInvite);
		});
	}

	if (CHAT.globalSelectedUserList.length > 0) {
		jQuery('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
	} else {
		jQuery('#userSelectionLength').text('');
	}

	jQuery('#backButton').off().on('click', function() {
		// loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();
		if (isInvite) {
			jQuery('#pills-chat-tab').tab('show');
		} else {
			socket.emit('getRoomList');
		}
	});
});

// Update User List(Invite)
// #36170
socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
	jQuery('#user_list').html('');
	const template = jQuery('#user-template').html();

	users.forEach( function(user) {
		// loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();

		user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)

		let html = Mustache.render(template, {
			id: user.shopMemberId,
			profileImage: user.profileImagePath,
			name: user.loginId
		});

		// クリックするとactive クラスを与え、チェック表示を出させる。
		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
			if (jQuery(this).find('.userCheckBox.active').length > 0) {
				// remove
				CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
					return user.loginId != element.loginId;
				});
			} else {
				// add
				CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
			}
			jQuery(this).find('.userCheckBox').toggleClass('active');

			if (CHAT.globalSelectedUserList.length > 0) {
				jQuery('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
			} else {
				jQuery('#userSelectionLength').text('');
			}
		});

		let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
			return selectedUser.loginId == user.loginId;
		})

		if (findObj) {
			jQuery(obj).find('.userCheckBox').toggleClass('active');
		}

		jQuery('#user_list').append(obj);
	})
	jQuery('.userCheckBox').show();

	// Rotate
	if(CHAT_UI.isLandscapeMode()) {
		jQuery(".user_list").addClass("col-6").removeClass("col-12");
		$(".squareBoxContent span").addClass("landscape_span");
	}

	jQuery('#backButton').off().on('click', function() {
		// loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();
		socket.emit('getGroupList', isInvite)
	});

	jQuery("#userSelectionConfirmBtn").off().on('click', function(){
		// loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();
		CHAT_UI.setConfirmButtonEvent(isInvite);
	});

	jQuery('#backButton').show();
	jQuery('.roomListIcon, .chatRoomIcon').hide();
	jQuery('#userSelectionConfirmBtn').show();
	jQuery('.userCheckBox').show();
	jQuery('#pills-user-tab').tab('show');
});

/* ---------------------------------------------------------------------- */
/* Show Error Log */
/* ---------------------------------------------------------------------- */

socket.on('showServerError', function (message){
	// #36174

	// #36215
	if(message.includes("SC_FORBIDDEN"))
	{
		alert('SC_FORBIDDEN');
		return;
	}

	if (message == 'server error Ocurred') {
		message = getLocalizedString("serverErrorOccured");
	} else if (message == 'Room not found') {
		message = getLocalizedString("errorRoomNotFound");
	}
	$("#customAlertTitle").text(message);
	$("#customAlertOk").text(getLocalizedString("yesTitle"));

	$('#customAlert').appendTo("body").modal({
		backdrop: 'static',
		keyboard: false
	})
	.on('click', '#customAlertOk', function(e) {
	});
	CHAT_UI.dismissLoadingIndicator();

	if(message == "Room not found"){
		CHAT.saveRoomInfo();
	}
});

// server's request : user info (retry join)
socket.on("retryJoinProcess", () => {
	var ua = window.navigator.userAgent.toLowerCase();
	//if((ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) && ua.indexOf("safari") == -1) {
	if (CHAT_UTIL.isIOS()) {
		// iosでの場合
		webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
	// } else if(ua.indexOf('android') > 0 && ua.indexOf('linux') == -1){
	} else if (CHAT_UTIL.isAndroid()) {
		// androidでの場合
		android.getLoginParameter();
	} else {
		CHAT_UI.htmlElementTextInitialize("ko")
		// webでのsocket connect
		socket.emit('join', params, function (err) {
			if (err) {
				// #36174
				$("#customAlertTitle").text(err);
				$("#customAlertOk").text(getLocalizedString("yesTitle"));

				$('#customAlert').appendTo("body").modal({
					backdrop: 'static',
					keyboard: false
				})
				.on('click', '#customAlertOk', function(e) {
				});
			} else {
				if(params.roomName != undefined) {
					jQuery('.titleRoomName').text(params.roomName).data('roomName', params.roomName);
				} else {
					let roomListTitle = getLocalizedString("roomListTitle")
					$('.titleRoomName').text(roomListTitle)
				}
			}
			// loadingIndicatorを表示しない
			CHAT_UI.dismissLoadingIndicator();
		});
	}
})