import { FieldInputItem } from "./FieldInputItem.js";

/**
 * Represents the actual input element on the creator tool
 * May contain multiple items if the field allows multiple values
 */
export class FieldInput {
	constructor(field, parentElem) {
		this.field = field;
		this.id = "field-" + field.key;
		this.items = [];
		this.parent = parentElem;

		this.appendHtml(parentElem);
	}

	appendHtml(parent) {
		const fieldContainer = document.createElement("div");
		fieldContainer.className = "field-container";

		const item = new FieldInputItem(this, fieldContainer);

		if (!this.field.isHidden) {
			parent.insertAdjacentHTML("beforeend", `
				<label for="${this.field.key}">${this.field.displayName}</label>
				<p class="description">${this.field.description ?? ""}</p>
			`);

			parent.appendChild(fieldContainer);

			if (this.field.allowMultiple && this.items.length === 0) {
				const addBtn = document.createElement("button");
				addBtn.className = "text-button";
				addBtn.type = "button";
				addBtn.innerText = "+ Add";
				addBtn.onclick = () => this.addItem(fieldContainer);
				parent.appendChild(addBtn);
			}
		}

		this.items.push(item);
		this.updateItems();
	}

	updateItems() {
		for (const item of this.items) item.update();
	}

	addItem(parent) {
		const item = new FieldInputItem(this, parent);
		this.items.push(item);

		this.updateItems();
	}

	removeItem(id) {
		const i = this.items.findIndex(item => item.id === id);

		this.items[i].remove();
		this.items.splice(i, 1);

		this.updateItems();

		this.parent.closest("form").onchange();
	}
}