function template(originalText, isMultiString) {
	const placeholder = "Write something";
	const input = !isMultiString 
		? `<input type="text" class="input" placeholder="${placeholder}">`
		: `<textarea class="input" placeholder="${placeholder}"></textarea>`;

	return `
		<div class="editable-string-content">
			<span class="editable-string">${originalText}</span>
			<button class="btn-icon without-hover edit-text-btn"><i class="ph ph-pencil-simple"></i></button>
		</div>
		<div class="editable-string-form d-none">
			<div class="form-group">
				<label class="label">
					${input}
				</label>
			</div>
			<button class="btn-icon without-hover apply-changes-btn"><i class="ph ph-check"></i></button>
			<button class="btn-icon without-hover cancel-changes-btn"><i class="ph ph-x"></i></button>
		</div>
	`;
}

export default function editableString(stringContainer, isMultiString) {
	isMultiString = isMultiString ?? false;

	const originalText = stringContainer.innerHTML;

	const component = Helper.template.createElement("div", {
		"class": "component editable-string-component"
	}, template(originalText, isMultiString));

	stringContainer.innerHTML = "";
	stringContainer.append(component);

	const editBtn = component.querySelector(".edit-text-btn");
	const applyBtn = component.querySelector(".apply-changes-btn");
	const cancelBtn = component.querySelector(".cancel-changes-btn");
	const content = component.querySelector(".editable-string-content");
	const editableString = component.querySelector(".editable-string");
	const form = component.querySelector(".editable-string-form");
	const input = component.querySelector(".input");

	component.editableString = {
		formIsDisplaying: false,
		value: originalText,
		input: input,
		eventsHandlers: {
			onChange: [],
			onSwitch: [],
		},
		switch: () => {
			if(component.formIsDisplaying) {
				form.classList.add("d-none");
				content.classList.remove("d-none");
				editableString.innerText = component.editableString.value;
			} else {
				form.classList.remove("d-none");
				content.classList.add("d-none");
				input.value = component.editableString.value;
			}

			component.formIsDisplaying = !component.formIsDisplaying;
			component.editableString.runEventHandler("onSwitch");
		},
		onChange: cb => {
			component.editableString.eventsHandlers.onChange.push(cb);
		},
		onSwitch: cb => {
			component.editableString.eventsHandlers.onSwitch.push(cb);
		},
		runEventHandler: evName => {
			component.editableString.eventsHandlers[evName].forEach(handler => handler(component.editableString));
		} 
	}

	editBtn.addEventListener("click", e => {
		component.editableString.switch();
	});

	cancelBtn.addEventListener("click", e => {
		component.editableString.switch();
	});

	applyBtn.addEventListener("click", e => {
		component.editableString.value = input.value;
		component.editableString.switch();
		component.editableString.runEventHandler("onChange");
	});

	return component;
}