/* This is modified radiobutton macro, for automatic checked state setup*/
/* Usage (be sure to use quotes around parameters):

	<<rbutton "$variable" "value">>
Or:
	<<rbutton "$variable" "value" "HTML_element_ID" "Text to replace with, inside html element with ID from previous parameter. <br> HTML tags allowed.">>

Group of radiobutton will be created based on variable name. Checked state will be set up if variable contain value matched with second parameter. Full form of macro call can be used to display extended description of selected value.
*/

Macro.add('rbutton', {
	handler() {
		if (this.args.length < 2) {
			const errors = [];
			if (this.args.length === 0) { errors.push('variable name'); }
			if (this.args.length < 2) { errors.push('checked value'); }
			return this.error(`no ${errors.join(' or ')} specified`);
		}

		// Ensure that the variable name argument is a string.
		if (typeof this.args[0] !== 'string') {
			return this.error('variable name argument is not a string');
		}

		const varName = this.args[0].trim();

		// Try to ensure that we receive the variable's name (incl. sigil), not its value.
		if (varName[0] !== '$' && varName[0] !== '_') {
			return this.error(`variable name "${this.args[0]}" is missing its sigil ($ or _)`);
		}

		const initValue = Wikifier.getValue(this.args[0]);
		const varId = Util.slugify(varName);
		const checkValue = this.args[1];
		const el = document.createElement('input');

		let replaceID = "";
		let replaceText = "";
		if (typeof this.args[2] === 'string') {
			replaceID = this.args[2];
		}
		if (typeof this.args[3] === 'string') {
			replaceText = this.args[3];
		}

		/*
		Setup and initialize the group counter.
		*/
		if (!TempState.hasOwnProperty(this.name)) {
			TempState[this.name] = {};
		}

		if (!TempState[this.name].hasOwnProperty(varId)) {
			TempState[this.name][varId] = 0;
		}

		/*
		Setup and append the input element to the output buffer.
		*/
		jQuery(el)
			.attr({
				id: `${this.name}-${varId}-${TempState[this.name][varId]++}`,
				name: `${this.name}-${varId}`,
				type: 'radio',
				tabindex: 0 // for accessibility
			})
			.addClass(`macro-${this.name}`)
			.on('change', function() {
				if (this.checked) {
					Wikifier.setValue(varName, checkValue);

					if (replaceID.length > 0 && replaceText.length > 0) {
						let replaceEl = document.getElementById(replaceID);
						// alert (replaceEl);
						if (replaceEl !== null) {
							replaceEl.innerHTML = replaceText;
						}
					}
				}
			})
			.ready(function() {
				// alert ("DOM finished");
				if (el.checked && replaceID.length > 0 && replaceText.length > 0) {
					let replaceEl = document.getElementById(replaceID);
					// alert (replaceEl);
					if (replaceEl !== null) {
						replaceEl.innerHTML = replaceText;
					}
				}
			})
			.appendTo(this.output);

		/*
		Set the story variable to the checked value and the input element to checked, if requested.
		*/
		if (initValue === checkValue) {
			el.checked = true;
			Wikifier.setValue(varName, checkValue);
		}
	}
});