import Doc from './doc';
import Format from './format';
import {highlightHtml, replaceMultiple} from './functions';

const $newLinePattern = /\{n}/g;
const $spacePattern = /\{s}/g;
const $tabPattern = /\{t}/g;

/**
 * Callback for form element iteration
 *
 * Formats each form element section
 *
 * @param {Element} parent
 */
const each = parent => {
	// Get the elements required to display
	const labelElements = Doc.getByTag('label', parent);
	const formElements = [].concat(
		Doc.getByTag('input', parent),
		Doc.getByTag('button', parent),
		Doc.getByTag('textarea', parent),
		Doc.getByTag('select', parent),
		Doc.getByTag('datalist', parent),
		Doc.getByTag('keygen', parent),
		Doc.getByTag('meter', parent),
		Doc.getByTag('output', parent),
		Doc.getByTag('progress', parent)
	);

	// If the required elements do not exist, bail out early
	if (!(Array.isArray(formElements)) && labelElements != null) {
		console.error('Missing required elements. {}', parent);
		return;
	}

	let labelHTML = '';
	let formElementHTML = '';

	if (Format.isLabelWrapped(labelElements)) {
		// If there are labels wrapping the form elements, treat them
		// a little differently.
		// Since the elements are wrapped in labels, the label elements are what we want
		// to work with.
		labelElements.forEach(element => {
			formElementHTML += Format.formatLabelWrappedElement(element);
		});
	} else {
		labelHTML = Format.formatHtml(labelElements[0], 0);

		formElements.forEach(formElement => {
			formElementHTML += '{n}{n}' + Format.formatHtml(formElement, 0);
		});
	}

	// Join the label markup with the form element markup
	const formCode = labelHTML + formElementHTML.trim();

	// Now replace the placeholders with proper whitespace equivalent markup
	// Setup up the highlighter
	let highLighted = highlightHtml(formCode);
	highLighted = replaceMultiple(highLighted, [
		[$newLinePattern, '<br />'],
		[$spacePattern, '&nbsp;'],
		[$tabPattern, '&nbsp;&nbsp;']
	]);
	highLighted = `<pre>${highLighted}</pre>`;

	// Piece together the HTML for the prettier HTML examples
	const codeElement = document.createElement('code');
	codeElement.className = 'DlHighlight html';
	codeElement.innerHTML = highLighted;

	// Append the prettified HTML to the parent element
	parent.appendChild(codeElement);
};

export default each;