<style>
	.inputIcon {
		background: #fafafa;
		color: #0a6ed1;
		cursor: pointer;
	}
	.inputIcon:hover{
		background: rgba(224,224,224,0.5)
	}
</style>

<ui5-input id="searchInput" placeholder="Enter search criteria ..." style="width: 100%">
	<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>

<script>
	var searchCriteria = "PASTA";
	searchIcon.addEventListener("click", function(){
		alert("Look for: " + searchCriteria);
	});
	searchInput.addEventListener("change", function(e){
		searchCriteria = e.target.value;
	});
</script>
	

<ui5-label class="samples-big-margin-right" for="myInput" required show-colon>Name</ui5-label>
<ui5-input id="myInput" placeholder="Enter your Name" required></ui5-input>

<ui5-label class="samples-big-margin-right" for="myPassword" required show-colon>Secret Code</ui5-label>
<ui5-input id="myPassword" type="Password" value-state="Error" placeholder="Enter your Secret Code" required></ui5-input>
	

<ui5-input id="valueHelpInput" placeholder="Enter product" show-suggestions>
	<ui5-icon id="valueHelpIcon" slot="icon" name="value-help"></ui5-icon>
</ui5-input>

<ui5-dialog id="dialog" accessible-name="Products Value Help">
	<div slot="header" id="dialogHeader">
		<div id="titleBar">
			<h2 id="headerTitle">Products</h2>
			<ui5-button design="Transparent" id="clearButton">Clear</ui5-button>
		</div>
		<ui5-input id="dialogSearchInput" placeholder="Search">
			<ui5-icon id="dialogSearchIcon" slot="icon" name="search"></ui5-icon>
		</ui5-input>
	</div>

	<ui5-list id="itemsList" no-data-text="No data"></ui5-list>

	<div slot="footer" id="footer">
		<ui5-button design="Transparent" id="cancelButton">Cancel</ui5-button>
	</div>
</ui5-dialog>

<script>
	valueHelpInput.addEventListener("input", loadSuggestions);
	valueHelpIcon.addEventListener("click", showDialog);
	dialogSearchInput.addEventListener("change", loadList);
	dialogSearchIcon.addEventListener("click", loadList);
	clearButton.addEventListener("click", clearQuery);
	cancelButton.addEventListener("click", closeDialog);
	itemsList.addEventListener("item-click", handleItemClick);

	async function loadSuggestions() {
		var response = await fetch("../../../assets/data/products.json");
		var products = await response.json();

		var query = valueHelpInput.value.toLowerCase();
		var suggestionItems = [];

		if (query) {
			suggestionItems = products
				.filter(({ name }) => name.toLowerCase().indexOf(query) === 0)
				.map(({ name }) => name)
				.sort((a, b) => a.localeCompare(b))
				.slice(0, 10);
		}

		[].slice.call(valueHelpInput.children, 1).forEach(item => {
			valueHelpInput.removeChild(item);
		});

		suggestionItems.forEach(item => {
			var li = document.createElement("ui5-suggestion-item");
			li.text = item;
			valueHelpInput.appendChild(li);
		});
	}

	function showDialog() {
		dialogSearchInput.value = valueHelpInput.value;
		loadList();
		dialog.show();
	}

	function closeDialog() {
		dialog.close();
	}

	async function loadList() {
		var response = await fetch("../../../assets/data/products.json");
		var products = await response.json();
		var query = dialogSearchInput.value.toLowerCase();

		itemsList.innerHTML = "";

		products
			.filter(({ name }) => name.toLowerCase().indexOf(query) === 0)
			.sort((a, b) => a.name.localeCompare(b.name))
			.forEach(item => {
				var li = document.createElement("ui5-li");
				li.innerHTML = item.name;
				li.image = item.productPicUrl;
				li.description = item.productId;

				itemsList.appendChild(li);
			});
	}

	function handleItemClick(event) {
		var item = event.detail.item;
		valueHelpInput.setAttribute("value", item.innerHTML);
		dialog.close();
	}

	function clearQuery() {
		dialogSearchInput.setAttribute("value", "");
		loadList();
	}
</script>