app
	.logo-section
		img(src="../../assets/npm.svg", height=40)
	.bar-section
		search-box
		search-results(results="{results}")
		.window-height-marker
	
	script.
		const Promise = require("bluebird");
		const rfr = require("rfr");
		
		const search = rfr("lib/search/constructor-io")("CD06z4gVeqSXRiDL2ZNK");
		
		this.mixin(require("riot-query").mixin);
		
		let lastQuery;
		this.results = []
		
		this.on("mount", () => {
			let searchBox = this.queryOne("search-box");
			let searchResults = this.queryOne("search-results");
			
			searchBox.on("selectionUp", () => {
				searchResults.moveSelectionUp();
			});
			
			searchBox.on("selectionDown", () => {
				searchResults.moveSelectionDown();
			});
			
			searchBox.on("queryChanged", (query) => {
				Promise.try(() => {
					lastQuery = query;
					return search(query);
				}).then((results) => {
					/* Sometimes, search results may come back out of order. Here we check whether
					 * the lastQuery is still the same as when we initially made the request. */
					if (lastQuery === query) {
						this.results = results.packages.map((pkg) => {
							return {
								name: pkg.value,
								description: pkg.data.description
							}
						});
						this.update();
					}
				});
			})
		});
		
		this.on("updated", () => {
			global.triggerWindowResize();
		});
	
	style(scoped, type="scss").
		.logo-section {
			position: absolute;
			left: 0px;
			top: 0px;
			bottom: 0px;
			width: 120px;
			text-align: center;
			background-color: #2a333c;
			padding: 9px;
		}

		.bar-section {
			position: absolute;
			left: 138px;
			top: 0px;
			bottom: 0px;
			right: 0px;
		}