// 名前空間
var CHAT_UI = {};

$(function() {
	let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight
	let searchBarHeight = document.getElementsByClassName("search-bar-fixed")[0].offsetHeight
	$(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`)

	/* チャットルーム一覧画面スクロール範囲
	 * 画面の高さ - (画面上部タイトルの高さ + ルーム名検索欄の高さ) */
	$(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight) + 'px'})`)

	$('.roomListIcon').hide();
	$('#userSelectionDeleteBtn').hide();
	//$('#createChatRoom').hide();
});

// Rotate
$(window).on('resize', function() {
	if (CHAT_UTIL.isMobile()) {
		return;
	}

	console.log(`width : ${$(this).width()}`);
	console.log(`height : ${$(this).height()}`);

	if(CHAT_UI.isLandscapeMode()) {
		$(".group_list").addClass("col-6").removeClass("col-12");
		$(".user_list").addClass("col-6").removeClass("col-12");
		$(".chat_list").addClass("col-6").removeClass("col-12");
		$(".squareBoxContent span").addClass("landscape_span");

		$(".mesgs").addClass("landscape_mesgs");
	} else {

		$(".group_list").removeClass("col-6").addClass("col-12");
		$(".user_list").removeClass("col-6").addClass("col-12");
		$(".chat_list").removeClass("col-6").addClass("col-12");
		$(".squareBoxContent span").removeClass("landscape_span");

		$(".mesgs").removeClass("landscape_mesgs");
	}
})

// New Room
// チャットルーム生成ボタン処理
$('#createChatRoom').on('click', function() {
	//loadingIndicatorを表示
	CHAT_UI.showLoadingIndicator();

	let isInvite = false;
	CHAT.globalIsInvite = isInvite;
	socket.emit('getGroupList', isInvite);
});

// Room Delete
// チャットルーム削除ボタン処理
$('#roomDeleteButton').on('click', function(e) {
	if ($('.deleteBox').is(':visible')) {
		// チャットルーム削除アイコンが表示されている時、ブラインド処理を行う
		$('.deleteBox').finish().show().fadeTo('slow', 0, function() {
			$(this).hide();
		});
		// チャットリストについてクリックイベントを与える
		$('.chat_list').off('click');
		$('.chat_list:not(.active_chat)').on('click', function(e) {
			//loadingIndicatorを表示
			CHAT_UI.showLoadingIndicator();
			let roomId = $(this).data('roomId');
			let roomName = $(this).data('roomname');
			socket.emit('joinRoom', roomId, roomName, function() {
				$('#messages').html('');
				$('.titleRoomName').text(roomName).data('roomName', roomName);
				$('#pills-chat-tab').tab('show');
				$("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
			});
		});

		let roomListTitle = getLocalizedString("roomListTitle")
		$('.titleRoomName').text(roomListTitle)

		$('.chat_list.active_chat').on('click', function(e){
			$('#pills-chat-tab').tab('show');
		});
	} else {
		// チャットルーム削除アイコンが表示されていない場合、表示する
		$('.deleteBox').finish().hide().fadeTo('slow',1).show();
		// #36129に対応
		let deleteRoomTitle = getLocalizedString("deleteRoomTitle")
		$('.titleRoomName').text(deleteRoomTitle)
		// 重複処理を防ぐためにチャットリストのクリックイベントを消す
		$('.chat_list').off('click');

		// チャットルームの削除アイコンにクリックイベントを与える
		$('.deleteBox').off('click');
		$('.deleteBox').on('click', function(e){
			// #36174
			let roomId = $(this).data('roomId');
			let activeRoom = $(this).data('activeRoom');
			$("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle"));
			$("#roomDelete").text(getLocalizedString("roomDelete"));
			$("#cancelTitle").text(getLocalizedString("cancelTitle"));

			// #36128
			$('#roomDeleteConfirm').appendTo("body").modal({
				backdrop: 'static',
				keyboard: false
			})
			.on('click', '#roomDelete', function(e) {
				//loadingIndicatorを表示
				CHAT_UI.showLoadingIndicator();
				// 現在接続されているチャットルームを離れるとメッセージテップを初期化する
				if (activeRoom) {
					$('#messages').html('');
					CHAT.saveRoomInfo('', '');
				}
				// チャットルームから退場する
				socket.emit('exitRoom', roomId);

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

$('#room-search').on('input', function(event) {
	if ($('#room-search').val().length > 0) {
		// 検索結果が有る場合、結果を表示する
		socket.emit('roomSearch', encodeURIComponent($('#room-search').val()));
	} else {
		socket.emit('getRoomList');
	}
});

//上にスクロールすると新しいメッセージを呼ぶ処理。
$('#messages').scroll(function(){
	if ($(this).scrollTop() === 0) {
		if (!$('#chatLoader').is(':visible')) {
			// 現在、メッセージの個数以前をメッセージを読み込む
			// ローディングアイコンを追加する
			let loader = $('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>')
			$('#messages').prepend(loader)
			socket.emit('getMessages', $(this).children().length, function() {
				// ローディングアイコンを削除する
				loader.remove();
			});
		}
	}
});

//メッセージ送信
$('#message-form').on('keypress', function(event){
	if (event.which == 13) {
		// Enterキーの処理
		$('#message-send-btn').click();
	}
});

// 送信ボタンの処理
$('#message-send-btn').on('click', function (e){
	e.preventDefault();
	const messageTextBox = $('#message-form');
	const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
	messageTextBox.val('');

	if (message.length > 0) {
		socket.emit(
			'createMessage', { text: message }
			, 0
		);
	}
	$('#message-form').focus();
});

// 写真アップロード
$('#fileUploadButton').on('click', function(){
	$('#imageInputTag').click();
});

// 動画アップロード
$('#fileUploadButton2').on('click', function(){
	$('#imageInputTag2').click();
});

$('#imageInputTag').on('change', function(){
	$('#image-form').submit();
});

$('#imageInputTag2').on('change', function(){
	$('#image-form2').submit();
});

$('#image-form').on('submit', function(e){
	e.preventDefault();
	const imageInputTag = $('#imageInputTag');
	const file = imageInputTag.prop('files')[0];
	if (file) {
		$('.overlay').addClass('active undismissable');
		$('.loader').addClass('active');
		CHAT_UI.showLoadingIndicator();
		var fd = new FormData($(this)[0]);

		//画像の大きさが500pixelより大きかったら、thumbnailを生成
		CHAT.createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
			if (resizeFile && thumbnailCreated) {
				//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
				fd.append('thumb', resizeFile)
			}

			// イメージをアップロード
			CHAT.uploadImage(fd)

		})
	}
});

$('#image-form2').on('submit', function(e){
	e.preventDefault();
	const imageInputTag2 = $('#imageInputTag2');
	const file = imageInputTag2.prop('files')[0];
	if (file) {
		$('.overlay').addClass('active undismissable');
		$('.loader').addClass('active');
		CHAT_UI.showLoadingIndicator();
		var fd = new FormData($(this)[0]);

		if(!file.type.includes("image")) { // video 保存
			CHAT.createVideoThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
				if(resizeFile && thumbnailCreated) {
					//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
					fd.append('thumb', resizeFile)
				}
				CHAT.uploadImage(fd);
			})
			return;
		}
	}
});

/* --------------------------------------------------- */
/* Nav Bar Functions																	 */
/* --------------------------------------------------- */

// Gallery Button
// ギャラリーボタンを押すと最後の写真をクリックさせる。 (ボタン非活性化中)
$('#imageGalleryButton').on('click', function(){
	$('[data-lightbox=attachedImages]:last').click();
});

//lightbox Configuration
lightbox.option({
	'resizeDuration': 0,
	'imageFadeDuration': 0,
	'fadeDuration': 300,
	'alwaysShowNavOnTouchDevices': true
});

$('#message-search').on('input', function(event) {
	// チャットキーワードを入力するとページ内にある単語をハイライトする。(mark.js 使用)
	if ($(this).val()) {
		$('.message_content').unmark();
		$('.message_content').mark($(this).val());

		if ($('[data-markjs=true]').length > 0) {
			// マーキングされている単語があった場合、最後の単語にスクロールを移動する。
			CHAT_UI.scrollToLastMarkedUnseen($(this).val());
		} else {
			// マーキングされている単語がない場合、下段にスクロールする。
			CHAT_UI.scrollToBottom();
		}
	} else {
		// チャットキーワードが空欄になるとマーキングを解除し、下段にスクロールする。
		$('.message_content').unmark();
		CHAT_UI.scrollToBottom();
	}
});

//次のマーキングされた単語にスクロールを移動する。
$('#pre-search').on('click', function(event) {
	CHAT_UI.scrollToLastMarkedUnseen(jQuery('#message-search').val());
});

// Exit Room
$('#exitRoom').on('click', function(event){
	// 36174
	$("#exitRoomTitle").text(getLocalizedString("exitRoomTitle"));
	$("#exitRoomOk").text(getLocalizedString("yesTitle"));
	$("#noExit").text(getLocalizedString("cancelTitle"));

	$('#exitRoomConfirm').appendTo("body").modal({
		backdrop: 'static',
		keyboard: false
	})
	.on('click', '#exitRoomOk', function(e) {
		//loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();
		// チャットルームから退場する
		socket.emit('exitRoom');
		$('#dismiss').click();
		CHAT.saveRoomInfo('', '');
	});
});

// Side Bar
$('#sidebarCollapse').on('click', function (){
	// open sidebar
	$('#sidebar').addClass('active');
	// fade in the overlay
	$('.overlay').addClass('active');
	$('.collapse.in').toggleClass('in');
	$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});

$('#dismiss, .overlay').on('click', function (){
	// hide sidebar
	$('#sidebar').removeClass('active');
	// hide overlay if dismissable
	$('.overlay:not(.undismissable)').removeClass('active');
});

//Invite User
//招待ボタンを押すとグループリストを持ってくる。(ボタンを動的に追加して微動作中)
$('#addUser').on('click', function(event){
	//loadingIndicatorを表示
	CHAT_UI.showLoadingIndicator();
	let isInvite = true;
	CHAT.globalIsInvite = isInvite;
	socket.emit('getGroupList', isInvite);
});

//グループ画面での検索
$('#groupListKeyword').on('input', function(event) {
	// data-name値で当該キーワードが入っているグループのみを表示する。
	if ($(this).val()) {
		$('.group_list:not([data-name*="'+$(this).val()+'" i])').hide();
		$('.group_list[data-name*="'+$(this).val()+'" i]').show();
	} else {
		$('.group_list').show();
	}
});

$('#userListKeyword').on('input', function(event) {
	// data-name値で当該キーワードが入っているユーザーのみを表示する。
	if ($(this).val()) {
		$('.user_list:not([data-name*="'+$(this).val()+'" i])').hide();
		$('.user_list[data-name*="'+$(this).val()+'" i]').show();
	} else {
		$('.user_list').show();
	}
});

$('#selectListKeyword').on('input', function(event) {
	if ($(this).val()) {
		$('.select_user_list:not([data-name*="'+$(this).val()+'" i])').hide();
		$('.select_user_list[data-name*="'+$(this).val()+'" i]').show();
	} else {
		$('.select_user_list').show();
	}
});

/* ---------------------------------------------------------------------- */
/*																																				*/
/*																	 Etc																	*/
/*																																				*/
/* ---------------------------------------------------------------------- */

// Tab Open/Shown Event
$('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
	var target = $(e.target).attr("href"); // e.target : activated tab
	switch(target) {
		case '#pills-chat':
			if (CHAT_UI.isLandscapeMode()) {
				$(".mesgs").addClass("landscape_mesgs");
			} else {
				$(".mesgs").removeClass("landscape_mesgs");
			}
			CHAT.globalIsInvite = true;
			$('.chatRoomIcon, .titleRoomName, #backButton').show();
			$('.roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
			$('#homeButton').hide();

			$('.titleRoomName').text($('.titleRoomName').data('roomName'));
			$('#newRoomName').val('');
			$('#userSelectionLength').text('');
			CHAT.globalSelectedUserList = [];

			$('#backButton').off().on('click', function() {
				//loadingIndicatorを表示
				CHAT_UI.showLoadingIndicator();
				socket.emit('leaveRoom', function() {
					CHAT.saveRoomInfo();
					socket.emit('getRoomList');
				});
			});
			console.log("show #pills-chat")
			//loadingIndicatorを表示しない
			CHAT_UI.dismissLoadingIndicator();
			break;
		case '#pills-chatlist':
			$('.titleRoomName, #backButton').show();
			$('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
			$('#homeButton').show();
			$('#room-search').val('');
			// set Title
			let roomListTitle = getLocalizedString("roomListTitle")

			$('.titleRoomName').text(roomListTitle);
			$('#newRoomName').val('');
			$('#userSelectionLength').text('');
			CHAT.globalSelectedUserList = [];

			break;
		case '#pills-user':
			$("#backButton").show();
			$("#userSelectionDeleteBtn").hide();
			$('#homeButton').hide();
			//loadingIndicatorを表示しない
			CHAT_UI.dismissLoadingIndicator();
			break;
		case '#pills-group':
			$("#backButton").show();
			$("#userSelectionDeleteBtn").hide();
			$('#homeButton').hide();
			//loadingIndicatorを表示しない
			CHAT_UI.dismissLoadingIndicator();
			break;
		case '#pills-confirm':
			$("#backButton").show();
			//loadingIndicatorを表示しない
			CHAT_UI.dismissLoadingIndicator();
			$('#homeButton').hide();
			$('.user_people').css("paddingLeft", "0px");
			break;
		case '#pills-communication':	// コミュニケーションのタブ
		case '#pills-setting':	// 設定のタブ
		case '#pills-profile':	// ユーザプロファイルのタブ
			$('.titleRoomName').show();
			$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
			$('#backButton').hide();
			break;
		default:
			$('.titleRoomName').show();
			$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
			$('#backButton').hide();
			break;
	}
});

// Tab Close/Hidden Event
$('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
	var target = $(e.target).attr("href"); // e.target : activated tab
	switch(target) {
		case '#pills-chat':
			$('#message-search').val('');
			break;
		case '#pills-chatlist':
			$('#room-search').val('');
			break;
		case '#pills-group':
			$('#groupListKeyword').val('');
			break;
		case '#pills-user':
			$('#userListKeyword').val('');
			break;
		case '#pills-confirm':
			$('#select_user_list').html('');
			$('#selectUserListKeyword').val('');
			$('.titleRoomName').show();
			$('.user_people').css("paddingLeft", "12%");
			break;
		case '#pills-communication':
		case '#pills-setting':
		case '#pills-profile':
			break;
		default:
			break;
	}
});

$('#pills-chat-tab').on('shown.bs.tab', function (e){
	CHAT_UI.scrollToBottom();
});

$('#pills-user-tab').on('shown.bs.tab', function (e){
	$('#userSelectionConfirmBtn').show();
});

$('#pills-confirm-tab').on('shown.bs.tab', function (e){
	$('#userSelectionConfirmBtn').show();
	$('#userSelectionLength').text('');
	$('#userSelectionDeleteBtn').hide();
});

CHAT_UI.scrollToBottom = function() {
	const messages = $('#messages');
	const scrollHeight = messages.prop('scrollHeight');
	messages.scrollTop(scrollHeight);
};

CHAT_UI.scrollToLastMarkedUnseen = function(value) {
	let target = $('[data-markjs=true]:not([data-seen=true])').last();
	let messages = $('#messages');
	if (target.length > 0) {
		messages.scrollTop(target.prop('offsetTop') - target.prop('offsetHeight') - messages.prop('offsetHeight') + target.parent().parent().height());
		target.attr('data-seen', true);
	} else {
		messages.scrollTop(0);
		$('.message_content').unmark();
		$('.message_content').mark(value);
	}
};

//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator = function() {
	$("#loadingIndicator").addClass('active undismissable');
}

//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator = function() {
	$("#loadingIndicator").removeClass('active undismissable');
}

//画面の方向をcheck
CHAT_UI.isLandscapeMode = function() {
	if (CHAT_UTIL.isMobile()) {
		return false;
	}

	return $(window).width() > $(window).height()
}

CHAT_UI.setConfirmButtonEvent = function(isInvite) {
	let titleText = isInvite ? getLocalizedString("inviteUsersSubtitle") : getLocalizedString("createRoomSubtitle")
	let invitedUserText = getLocalizedString("invitedUser")
	if (!isInvite) {
		$('#newRoomName').show();
	}

	$('#userSelectionConfirmBtn').off().on('click', function(event) {
		//loadingIndicatorを表示
		CHAT_UI.showLoadingIndicator();
		CHAT_UI.showConfirmView(isInvite);
	});

	CHAT_UI.showConfirmView(isInvite);
	$('#inviteStatus').text(titleText);
	$('#invitedUsers').text(invitedUserText);
	$('#pills-confirm-tab').tab('show');
}

//ConfirmView initialize
CHAT_UI.showConfirmView = function(isInvite) {
	const template = $('#user-template').html();
	$('#select_user_list').html('');

	CHAT.globalSelectedUserList.forEach(function(user){
		let html = Mustache.render(template, {
			id: user.shopMemberId,
			profileImage: user.profileImagePath,
			name: user.loginId
		});
		// TODO 次のコミットに参考事項
		// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
		// 影響テスト後、削除予定。 kang-dh
		let obj = $(jQuery.parseHTML(html)).on('click',function(){
			$(this).find('.userCheckBox').toggleClass('active');
		});

		$('#select_user_list').append(obj);
	});

	let roomListTitle = getLocalizedString("createRoomTitle")
	$('.titleRoomName').text(roomListTitle)

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

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

	$("#userSelectionConfirmBtn").off().on('click', function(){
		if (isInvite) {
			let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
				return e.dataset.id;
			});
			// ユーザーの名前(login id)リスト。
			let loginIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
				return e.dataset.name;
			});

			if(userIdList.length > 0 && loginIdList.length > 0) {
				//loadingIndicatorを表示
				CHAT_UI.showLoadingIndicator();
				socket.emit('inviteUsers', userIdList, loginIdList, function() {
					$("#userSelectionDeleteBtn").hide();
					$('#pills-chat-tab').tab('show');
				});
			}
		} else {
			if ($('#select_user_list .user_list').find('.userCheckBox').length > 0) {
				// #36130に対応
				const trimmedRoomName = $('#newRoomName').val().trim()
				if (trimmedRoomName.length == 0) {

					// loadingIndicatorを表示
					CHAT_UI.showLoadingIndicator();
					let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
						return e.dataset.id;
					});
					let userNameList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
						return e.dataset.name;
					});

					//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
					// 参加ユーザ名でルーム名を生成
					let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');

					// ルーム名のURIencodingを行う
					const encodedRoomName = encodeURIComponent(newRoomName);
					socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
						socket.emit('joinRoom', newRoomId, newRoomName, function () {
							CHAT.saveRoomInfo(newRoomId, newRoomName);
							$('#messages').html('');
							$('.titleRoomName').text(newRoomName).data('roomName', newRoomName);
							$("#userSelectionDeleteBtn").hide();
							$('#pills-chat-tab').tab('show');
						});
					});

				} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
					 || trimmedRoomName.includes('&') || trimmedRoomName.includes('=') || trimmedRoomName.includes("+") || trimmedRoomName.includes('$') || trimmedRoomName.includes(",") || trimmedRoomName.includes('-')
					 || trimmedRoomName.includes('_') || trimmedRoomName.includes('.') || trimmedRoomName.includes('!') || trimmedRoomName.includes('~') || trimmedRoomName.includes('*') || trimmedRoomName.includes("\'")
					 || trimmedRoomName.includes('(') || trimmedRoomName.includes(')') || trimmedRoomName.includes('#') || trimmedRoomName.includes("\\") || trimmedRoomName.includes("\"") || trimmedRoomName.includes("`")) {
					// #36147
					// #36174
					$("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
					$("#customAlertOk").text(getLocalizedString("yesTitle"));

					$('#customAlert').appendTo("body").modal({
						backdrop: 'static',
						keyboard: false
					})
					.on('click', '#customAlertOk', function(e) {
					});
				} else if (trimmedRoomName.length > 20) {
					// #36142
					var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除

					// #36174
					$("#customAlertTitle").text(getLocalizedString("nameTooLong"));
					$("#customAlertOk").text(getLocalizedString("yesTitle"));

					$('#customAlert').appendTo("body").modal({
						backdrop: 'static',
						keyboard: false
					})
					.on('click', '#customAlertOk', function(e) {
						$('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
					});

				} else {
					//loadingIndicatorを表示
					CHAT_UI.showLoadingIndicator();
					let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
						return e.dataset.id;
					});

					// ルーム名のtrimmingした後、URIencodingを行う
					const encodedRoomName = encodeURIComponent(trimmedRoomName);
					socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
						socket.emit('joinRoom', newRoomId, trimmedRoomName, function () {
							CHAT.saveRoomInfo(newRoomId, trimmedRoomName);
							$('#messages').html('');
							$('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName);
							$("#userSelectionDeleteBtn").hide();
							$('#pills-chat-tab').tab('show');
						});
					});
				}
			}
		}
	});

	$("#userSelectionDeleteBtn").hide();

	$("#userSelectionDeleteBtn").off().on('click', function() {
		// #36174
		$("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
		$("#customConfirmOk").text(getLocalizedString("roomDelete"));
		$("#customAlertCancel").text(getLocalizedString("cancelTitle"));

		$('#customConfirm').appendTo("body").modal({
			backdrop: 'static',
			keyboard: false
		})
		.on('click', '#customConfirmOk', function(e) {
			CHAT_UI.deleteButtonAction(isInvite);
		});

	});
}

CHAT_UI.deleteButtonAction = function(isInvite) {
	//配列の整理
	jQuery.makeArray($('#select_user_list .user_list').find(".userCheckBox.active")).map(function (e) {
		CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
			return e.dataset.name != element.loginId;
		});
	});

	CHAT_UI.showConfirmView(isInvite)
	$('#select_user_list .user_list').find('.userCheckBox').show();
}

CHAT_UI.htmlElementTextInitialize = function(languageCode) {
	moment.locale(languageCode);
	setLanguage(languageCode);
	$(".titleRoomName").text(getLocalizedString("roomListTitle"));
	$("#message-form").attr("placeholder", getLocalizedString("chat_placeholder"));
	$("#message-search").attr("placeholder",$("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
	$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
	$("#participants").text(getLocalizedString("participants"))

	$("#fileUploadButton").text(getLocalizedString("photo"))
	$("#fileUploadButton2").text(getLocalizedString("video"))

	$("#okayLabel").text(getLocalizedString("okayLabel"))
	$("#completeLabel").text(getLocalizedString("completeLabel"))
	$("#thankLabel").text(getLocalizedString("thankLabel"))
	$("#startToWorkLabel").text(getLocalizedString("startToWorkLabel"))


	$("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch"))
	$("#room-search").attr("placeholder",$("#room-search").attr("placeholder")+getLocalizedString("room_search_placeholder"));
	$("#userListKeyword").attr("placeholder", getLocalizedString("userSearch"))
	$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"))
}

// 画像の読み込みが全て終わったタイミングでコールバック実行
// FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
CHAT_UI.waitForLoadingImage = function(div, callback) {
	var imgs = div.find("img");
	var count = imgs.length;
	if (count==0)
		callback();
	var loaded = 0;
	imgs.one( "load" , function ( e ) {
		// イメージが読み込まれた
		loaded++;
		if ( loaded === count ) {
			callback();
		}
	}).each( function () {
		if ( this.complete || this.readyState === readyState.COMPLETED ) {
			$(this).trigger("load");
		}

	});
}

CHAT_UI.refreshRoomList = function() {
    var rooms = CHAT_DB.getRoomList();
    CHAT.globalIsInvite = false;
    activeRoomId = null;
    // #36146に対応
    let keywordSearchMode = false;
    if ($('#room-search').val().length > 0) {
        keywordSearchMode = true;
    }
   $('#room_list').html('');
    let roomListTitle = getLocalizedString("roomListTitle");
    $('.titleRoomName').text(roomListTitle);
    if (rooms.length === 0) {
        // 検索結果がない場合のメッセージを追加
        if (!keywordSearchMode) {
            let emptyListString = getLocalizedString("roomListEmptyString")
            $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
        } else {
            let emptyListString = getLocalizedString("searchRoomListEmptyString")
            $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
        }
    }
    // チャットルームの様式を読み込む
    const template = $('#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")
        }
        var displayMsg;
        //TODO 協業の場合処理追加必要
        if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
        if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
        let html = Mustache.render(template, {
            roomName: room.chatRoomName,
            roomId: room.chatRoomId,
            profileImage: room.profileImagePath,
            active: activeRoomId === room.chatRoomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
            lastMessage: displayMsg ,
            time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
            unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
            userCnt: room.userCount
        });
        // Click event
        let obj = $(jQuery.parseHTML(html)).on('click', function() {
            //TODO ルームに入る処理追加必要
        });
        // チャットルームリストに追加する
        $('#room_list').append(obj);
    });
    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()
        }
    }
    $('#createChatRoom').show();
    if (CHAT_UI.isLandscapeMode()) {
        $(".chat_list").removeClass("col-12").addClass("col-6");
    }
    $("#userSelectionDeleteBtn").hide();

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

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