export class FieldInputItem {
	container = null;
	removeBtn = null;

	constructor(input, parentElem) {
		this.input = input;
		this.field = input.field;
		this.id = input.id + (input.field.allowMultiple ? "-" + Math.random().toString().slice(2, 5) : "");

		this.appendHtml(parentElem);
	}

	appendHtml(parent) {
		const container = document.createElement("div");
		container.style.display = "flex";
		container.style.gap = "0.5rem";

		if (this.field.allowMultiple) {
			const wrapper = document.createElement("div");
			wrapper.innerHTML = this.field.getInputHtml(this.id);
			container.appendChild(wrapper);

			const removeBtn = document.createElement("button");
			removeBtn.type = "button";
			removeBtn.className = "text-button";
			removeBtn.innerHTML = "× Remove";
			removeBtn.onclick = () => this.input.removeItem(this.id);
			container.appendChild(removeBtn);

			this.removeBtn = removeBtn;
		} else {
			container.innerHTML = this.field.getInputHtml(this.id);
		}

		parent.appendChild(container);
		this.container = container;
	}

	update() {
		if (this.removeBtn) {
			this.removeBtn.style.display = this.input.items.length > 1 ? "inline-block" : "none";
		}
	}

	remove() {
		this.container.remove();
	}

	isValid() {
		return this.field.isValidInput(this.id);
	}

	getValue() {
		return this.field.getInputValue(this.id);
	}

	toString() {
		return this.field.inputToString(this.id);
	}
}