// --- Short id
const _id = (el) => document.getElementById(el);
// --- Short selector
const _ = (el) => document.querySelector(el);
// --- html id elements
const jsonNew = _id("json-new");
const jsonCreator = _id("json-creator");
const jsonOutput = _id("json-output");

// --- Data demo
let data =
	'[{"id":"3hkm4r","key":"danger","type":"color","value":"#ff9999"},{"id":"ntptf1","key":"primary","type":"color","value":"#73b9f7"},{"id":"gms745","key":"green","type":"color","value":"#59f3b8"},{"id":"m4qllp","key":"yellow","type":"color","value":"#ffec70"}]';

/**
 * Drag and drop creator
 *
 * By Moncho Varela (nakome)
 */
const dragAndDropCreator = {
	/**
	 *  Create element
	 *
	 * @param string element
	 * @param string where
	 * @param array args
	 *
	 * @return string result
	 */
	createElement(element, where, args) {
		let d = document.createElement(element);
		if (args) for (const [k, v] of Object.entries(args)) d[k] = v;
		where.appendChild(d);
		return d;
	},

	/**
	 *  Check wich value is
	 *
	 * @return string result
	 */
	whichValueIs(key) {
		let result = key ? key : "text";
		if (key === "date") {
			result = "date";
		} else if (key === "color") {
			result = "color";
		} else if (key === "month") {
			result = "month";
		} else if (key === "number") {
			result = "number";
		} else if (key === "time") {
			result = "time";
		} else if (key === "week") {
			result = "week";
		} else if (key === "password") {
			result = "password";
		} else if (key === "email") {
			result = "email";
		} else if (key === "web") {
			result = "web";
		} else if (key === "url") {
			result = "url";
		} else if (key === "datetime-local") {
			result = "datetime-local";
		}
		return result;
	},

	/**
	 * Export Objects
	 *
	 * @return array objs;
	 */
	exportObjects() {
		let selectors = document.querySelectorAll(".key"),
			arr = Array.prototype.slice.call(selectors),
			objs = [];
		arr.map(function (item) {
			if (typeof item.children[1] !== "undefined") {
				objs.push({
					id: dragAndDropCreator.uid(6),
					key: item.children[1].value,
					type: item.children[2].value,
					value: item.children[3].value
				});
			}
		});
		return objs;
	},

	/**
	 * Generate unique id
	 * @param number len
	 */
	uid(len) {
		let IDX = 36,
			HEX = "";
		while (IDX--) HEX += IDX.toString(36);
		let str = "",
			num = len || 11;
		while (num--) str += HEX[(Math.random() * 36) | 0];
		return str;
	},
	/**
	 * Import objects
	 *
	 * @param string element
	 * @param array data
	 */
	sendJsonOutput: async () => {
		jsonOutput.value = await JSON.stringify(dragAndDropCreator.exportObjects());
	},

	/**
	 * Import objects
	 *
	 * @param string element
	 * @param array data
	 */
	importObjects: async (elem, data) => {
		let arr = Array.prototype.slice.call(data);
		await arr.map(function (item) {
			dragAndDropCreator.createList(elem, item.key, item.type, item.value);
		});
		dragAndDropCreator.sendJsonOutput();
	},

	/**
	 * Create list
	 *
	 * @param string wherePlaceElement
	 * @param string key
	 * @param string typeOfValue
	 * @param string val
	 */
	createList(wherePlaceElement, key, typeOfValue, val) {
		// group container
		let dragAndDropContainer = dragAndDropCreator.createElement(
			"div",
			wherePlaceElement,
			{
				className: "key",
				draggable: true
			}
		);

		// drag and drop element
		let bDrag = dragAndDropCreator.createElement("span", dragAndDropContainer, {
			innerHTML: "☰",
			className: "drag"
		});

		// init form vars
		let customKey, inputKey, selectType, inputValue;

		// the key element
		inputKey = dragAndDropCreator.createElement("input", dragAndDropContainer, {
			type: "text",
			className: "input-key",
			value: key,
			onchange: () => dragAndDropCreator.sendJsonOutput()
		});

		// the select element
		selectType = dragAndDropCreator.createElement(
			"select",
			dragAndDropContainer,
			{
				className: "input-select",
				onchange: function (evt) {
					inputValue.type = dragAndDropCreator.whichValueIs(evt.target.value);
					dragAndDropCreator.sendJsonOutput();
				}
			}
		);

		// the value element
		inputValue = dragAndDropCreator.createElement("input", dragAndDropContainer, {
			type: dragAndDropCreator.whichValueIs(typeOfValue),
			className: "input-value",
			value: val,
			onchange: () => dragAndDropCreator.sendJsonOutput()
		});

		// list of type elements
		let array = [
			"text",
			"color",
			"date",
			"month",
			"number",
			"textarea",
			"time",
			"week",
			"password",
			"email",
			"url",
			"datetime-local"
		];
		for (let i = 0; i < array.length; i++) {
			let options = dragAndDropCreator.createElement("option", selectType, {
				selected: array[i] === typeOfValue ? true : false,
				value: array[i],
				text: array[i]
			});
		}

		// remove button
		let bClose = dragAndDropCreator.createElement(
			"button",
			dragAndDropContainer,
			{
				className: "btn btn-danger",
				innerHTML: "&times;",
				onclick: function () {
					this.parentElement.remove();
					dragAndDropCreator.sendJsonOutput();
				}
			}
		);
	}
};

// --- Add new dragable element
jsonNew.addEventListener(
	"click",
	(evt) => {
		evt.preventDefault();
		dragAndDropCreator.createList(jsonCreator, "name", "text", "hello");
		dragAndDropCreator.sendJsonOutput();
	},
	false
);

// --- Import data and init Sortable
dragAndDropCreator.importObjects(jsonCreator, JSON.parse(data)).then(() => {
	Sortable.create(jsonCreator, {
		handle: ".drag",
		animation: 300,
		onUpdate: () => dragAndDropCreator.sendJsonOutput()
	});
});