<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="content" class="modal fade pt-5rem" id="search-user-modal">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<div class="d-flex align-items-center">
					<h4 class="modal-title">[[#{search_user}]]</h4>
					<i class="fas fa-info-circle text-info ml-1"
					   data-toggle="tooltip" data-placement="top"
					   th:title="#{search_in_username_display_name_email_and_phone}"></i>
				</div>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="row">
					<label for="searchUserKeyword" class="col-sm-2 col-form-label">[[#{keyword}]]</label>
					<div class="col-sm-10">
						<label id="searchUserKeywordErrorLabel" class="col-form-label text-danger d-none" for="searchUserKeyword">
							<i class="far fa-times-circle"></i> <span id="searchUserKeywordError">[[#{not_found}]]</span>
						</label>
						<input type="search" name="searchUserKeyword" id="searchUserKeyword"
							   class="form-control" th:placeholder="#{keyword}"
							   onkeyup="ezyadmin.onKeyUpToSearchUser();"
							   autocomplete="off" inputmode="text">
					</div>
				</div>
			</div>
			<div class="modal-footer justify-content-between">
				<button type="button" class="btn btn-default" data-dismiss="modal">[[#{cancel}]]</button>
				<button type="button" class="btn btn-primary"
						onclick="ezyadmin.onSearchUserFinishClick();">
					<th:block th:if="${finishButton != null}">
						[[${finishButton}]]
					</th:block>
					<th:block th:if="${finishButton == null}">
						[[#{done}]]
					</th:block>
				</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
<script th:fragment="scripts">
// =========== add new role script ========
ezyadmin.showSearchUserModal = function() {
	var keyword = $('#searchUserKeyword').val('');
	$('#searchUserKeywordErrorLabel').addClass('d-none');
	$('#roleDisplayNameErrorLabel').addClass('d-none');
	$('#search-user-modal').modal('show');
}

ezyadmin.hideSearchUserModal = function() {
	$('#search-user-modal').modal('hide');
}

$('#search-user-modal').on('shown.bs.modal', function () {
    $('#searchUserKeyword').focus();
});

ezyadmin.onKeyUpToSearchUser = function() {
	if(event.key === 'Enter') {
    	ezyadmin.onSearchUserFinishClick();
    } else {
    	ezyadmin.suggestUserList();
    }
}

ezyadmin.suggestUserList = function(fromSearchButton) {
    var keyword = $('#searchUserKeyword').val();
    if (!keyword.length || keyword.endsWith('>')) {
    	return;
    }
    var baseUrl = ezyadmin.suggestUsersUrl || '/api/v1/users/simple-search';
    var url = baseUrl + (baseUrl.indexOf('?') < 0 ? '?' : '&') + 'keyword=' + keyword;
    $.ajax({
        type: 'GET',
        url: url,
        success: function (data) {
			if (data.length) {
				$('#searchUserKeywordErrorLabel').addClass('d-none');
			} else {
				$('#searchUserKeywordErrorLabel').removeClass('d-none');
        	}
        	ezyadmin.suggestedUserByUsername = {};
			data.forEach(item => {
				ezyadmin.suggestedUserByUsername[item.username] = item;
			});
        	if (fromSearchButton) {
        		$('#searchUserKeyword').val(
        			data[0].name + '<' + data[0].username + '>'
        		);
        		return;
        	}
			var suggestedUsers = [];
			data.forEach(item => {
				suggestedUsers.push(
					item.name + '<' + item.username + '>'
				);
			});
			$("#searchUserKeyword").autocomplete({
				source: function(request, response) {
					response(suggestedUsers);
        		}
			});
        },
        error: function (data, e) {
            ezyadmin.processGetApiErrors(data);
        }
	});
}

$("#searchUserKeyword").autocomplete({
	source: []
});

ezyadmin.onSearchUserFinishClick = function() {
	$('#search-user-modal').modal('hide');
	var keyword = $('#searchUserKeyword').val();
	if(!keyword.length) {
		return;
	}
	var username = keyword.substring(
		keyword.indexOf('<') + 1,
		keyword.indexOf('>')
	);
	var foundUserData = ezyadmin.suggestedUserByUsername[username];
	if (foundUserData) {
		ezyadmin.onSearchUserModalCloseWithUserData(foundUserData);
	}
}
</script>
</html>
