"use strict";

// the last search query
var last_search = null;
// the collection of parts
var parts = null;
// part field to populate
const fields = ["name", "description", "details", "package", "pincount", "manufacturer", "family", "datasheet", "page", "location", "stock"];
// URLs to set
const urls = ["page","datasheet"];

function search()
{
	const terms = document.getElementById('terms');
	if (terms && terms.value && terms.value.length >= 3) {
	} else {
		return;
	}

	last_search = '/search/' + terms.value;
	let xhr = new XMLHttpRequest();
	xhr.open('GET', last_search, true);
	xhr.onload = function() {
		if (this.responseURL.endsWith(last_search)) {
			parts = JSON.parse(this.response)
			results();
		}
	};
	xhr.onerror = function() {
		console.log("search call failed");
	};
	xhr.send();
}

function results()
{
	const select = document.getElementById('results');
	select.innerHTML = null;
	for (const part of parts) {
		const option = document.createElement('option');
		option.setAttribute('value', part.id);
		option.innerHTML = part.name + " (" + part.description + ")";
		select.appendChild(option);
	}
}

function clear()
{
	// clear part fields
	for (const field of fields) {
		const input = document.getElementById('part_' + field);
		if (input.tagName == "INPUT") {
			input.value = "";
		} else if (input.tagName == "TEXTAREA") {
			input.innerHTML = null;
		}
	}
	// clear URLs
	for (const field of urls) {
		const a = document.getElementById('url_' + field);
		a.href = null;
	}
	// clear distributors
	const distributors = document.getElementById('distributors');
	distributors.innerHTML = null;
	// clear properties
	const properties = document.getElementById('properties');
	properties.innerHTML = null;
}

function select()
{
	const results = document.getElementById('results');
	if (results.selectedIndex >= 0) {
		let part_selected = parseInt(results.options[results.selectedIndex].value);
		for (const part of parts) {
			if (part.id == part_selected) {
				console.log(part);
				// populate part fields
				for (const field of fields) {
					const input = document.getElementById('part_' + field);
					if (input.tagName == "INPUT") {
						if (undefined === part[field]) {
							input.value = "";
						} else {
							input.value = part[field];
						}
					} else if (input.tagName == "TEXTAREA") {
						if (undefined === part[field]) {
							input.innerHTML = null;
						} else {
							input.innerHTML = part[field];
						}
					}
				}
				// set URLs
				for (const field of urls) {
					const a = document.getElementById('url_' + field);
					if (null == a) {
						continue;
					}
					if (undefined === part[field]) {
						a.href = null;
					} else {
						a.href = part[field];
					}
				}
				// set distributors
				const distributors = document.getElementById('distributors');
				distributors.innerHTML = null;
				for (const distributor of part["distributors"]) {
					const tr = document.createElement('tr');
					const td_name = document.createElement('td');
					td_name.innerText = distributor.name;
					tr.appendChild(td_name);
					const td_sku = document.createElement('td');
					const input = document.createElement('input');
					input.type = "text";
					input.style.width = "95%";
					if (distributor.sku) {
						input.value = distributor.sku;
					}
					td_sku.appendChild(input);
					tr.appendChild(td_sku);
					const td_url = document.createElement('td');
					if (distributor.url) {
						td_url.innerHTML = "<a href='" + distributor.url + "'>link</a>";
					}
					tr.appendChild(td_url);
					distributors.appendChild(tr);
				}
				// add properties
				const properties = document.getElementById('properties');
				properties.innerHTML = null;
				for (const prop in part["properties"]) {
					const tr = document.createElement('tr');
					let td = document.createElement('td');
					let input = document.createElement('input');
					input.type = "text";
					input.style.width = "95%";
					input.value = prop;
					td.appendChild(input);
					tr.appendChild(td);
					td = document.createElement('td');
					input = document.createElement('input');
					input.type = "text";
					input.style.width = "95%";
					input.value = part["properties"][prop].join(",");
					td.appendChild(input);
					tr.appendChild(td);
					properties.appendChild(tr);
				}
				// add empty property field
				let tr = document.createElement('tr');
				let td = document.createElement('td');
				let input = document.createElement('input');
				input.type = "text";
				input.style.width = "95%";
				td.appendChild(input);
				tr.appendChild(td);
				td = document.createElement('td');
				input = document.createElement('input');
				input.type = "text";
				input.style.width = "95%";
				td.appendChild(input);
				tr.appendChild(td);
				properties.appendChild(tr);
				// add attachments
				const attachments = document.getElementById('attachments');
				attachments.innerHTML = null;
				for (const attachment of part["attachments"]) {
					const a = document.createElement('a');
					a.href = attachment;
					const img = document.createElement('img');
					img.alt = attachment.split("/").slice(-1);
					img.src = attachment;
					a.appendChild(img);
					attachments.appendChild(a);
					console.log(attachments);
				}
			}
		}
	}
}

function delete_part()
{
	if (null == parts) {
		return;
	}
	const results = document.getElementById('results');
	if (results.selectedIndex < 0) {
		return;
	}
	const part_selected = parseInt(results.options[results.selectedIndex].value);
	const xhr = new XMLHttpRequest();
	xhr.open('GET', '/delete/' + part_selected, true);
	xhr.onload = function() {
		clear();
		search(); // refresh search
	};
	xhr.onerror = function() {
		console.log("delete part failed");
	};
	xhr.send();
}