/**
 * Creates an element with the specified namespace URI, qualified name,
 * attributes and children.
 *
 * @param String ns         The namespace URI to use.
 * @param String tagName    A string that specifies the type of element
 *                          to be created.
 * @param Object attributes An object containing key-value mappings for
 *                          attributes to be set on the newly
 *                          created element.
 * @param Array children    An array containing child elements and/or
 *                          strings. Any strings will be inserted as text
 *                          nodes into the newly created element. Children
 *                          will be appended in array order.
 */

function createElementNS(ns, tagName, attributes={}, children=[]) {
    const elem = document.createElementNS(ns, tagName);
    Object.entries(attributes).forEach(([key, value]) => {
        elem.setAttribute(key, value);
    });
    if(children) {
        for(let i=0; i<children.length; ++i) {
            let child = children[i];
            if(typeof child === "string") {
                child = document.createTextNode(child);
            }
            elem.appendChild(child);
        }
    }
    return elem;
}

/**
 * Creates an HTML element with the specified tag name,
 * attributes and children.
 *
 * @param String tagName    A string that specifies the tag name of the
 *                          element to be created.
 * @param Object attributes An object containing key-value mappings for
 *                          attributes to be set on the newly
 *                          created element.
 * @param Array children    An array containing child elements and/or
 *                          strings. Any strings will be inserted as text
 *                          nodes into the newly created element. Children
 *                          will be appended in array order.
 */

export function createElement(tagName, attributes={}, children=[]) {
    return createElementNS('http://www.w3.org/1999/xhtml',
                           tagName,
                           attributes,
                           children);
}

/**
 * Creates an SVG element with the specified tag name,
 * attributes and children.
 *
 * @param String tagName    A string that specifies the tag name of the
 *                          element to be created.
 * @param Object attributes An object containing key-value mappings for
 *                          attributes to be set on the newly
 *                          created element.
 * @param Array children    An array containing child elements and/or
 *                          strings. Any strings will be inserted as text
 *                          nodes into the newly created element. Children
 *                          will be appended in array order.
 */

export function createSVGElement(tagName, attributes={}, children=[]) {
    return createElementNS('http://www.w3.org/2000/svg',
                           tagName,
                           attributes,
                           children);
}

/**
 * Appends a newly created HTML element with the specified tag name,
 * attributes and children to the element on which the function is called.
 *
 * @param String tagName    A string that specifies the tag name of the
 *                          element to be created.
 * @param Object attributes An object containing key-value mappings for
 *                          attributes to be set on the newly
 *                          created element.
 * @param Array children    An array containing child elements and/or
 *                          strings. Any strings will be inserted as text
 *                          nodes into the newly created element. Children
 *                          will be appended in array order.
 */

function createChild(tagName, attributes={}, children=[]) {
    const elem = createElement(tagName, attributes, children);
    this.appendChild(elem);
    return elem;
}

// Monkey-patch createChild onto the HTMLElement prototype
if(typeof HTMLElement.prototype.createChild === 'undefined') {
    HTMLElement.prototype.createChild = createChild;
}