/**
 * @param html {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    let template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    //firstChild may be a comment so we must use firstElementChild to avoid picking it
    return template.content.firstElementChild;
}

/**
 * Converts an Android Vector Drawable to a standard SVG by striping off or renaming some elements
 *
 * @param s {String} String of an Android Vector Drawable
 * @returns {String} The same string but in the standard SVG representation
 */
function androidSVGtoNormalSVG(s) {
    s = s.replace(/<\?xml version="1\.0" encoding="utf-8"\?>/g, '');
    s = s.replace(/<vector xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"/g, '<svg xmlns="http://www.w3.org/2000/svg"');
    s = s.replace(/<\/vector>/g, '</svg>');
    s = s.replace(/android:(height|width)="(\d+)dp"/g, '');
    s = s.replace(/android:viewportHeight="(\d+\.?\d+)"/g, 'height="$1"');
    s = s.replace(/android:viewportWidth="(\d+\.?\d+)"/g, 'width="$1"');
    s = s.replace(/android:fillColor=/g, 'fill=');
    s = s.replace(/android:pathData=/g, 'd=');
    //s = s.replace(/android:/g, '');
    return s;
}

function addToTable(name, svg) {
    let table = document.querySelector("#preview_table > tbody");
    let row = htmlToElement("<tr></tr>");
    row.appendChild(htmlToElement("<td>" + name + "</td>"));
    let td = htmlToElement("<td></td>");
    td.appendChild(svg);
    row.appendChild(td);
    table.appendChild(row);
}

function addSingleItemToTable(str) {
    let table = document.querySelector("#preview_table > tbody");
    table.append(htmlToElement("<tr><td colspan='2'>" + str + "</td></tr>"))
}

function getFile(iconName, downloadUrl) {
    return new Promise((resolve, reject) => {
        let request = new XMLHttpRequest();
        request.open('GET', downloadUrl, true);
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) {
                let androidXmlText = request.responseText;
                androidXmlText = androidSVGtoNormalSVG(androidXmlText);
                resolve([iconName, androidXmlText]);
            } else if (request.readyState === 4) {
                //Request completed with an error
                resolve([iconName, "<span>Error during download</span>"]);
            }
        };
        request.send(null);
    });

}

// This function recovers all icons inside the drawable folder via github API
(function getIcons() {
    let request = new XMLHttpRequest();
    request.open("GET", "https://api.github.com/repos/mozilla-mobile/android-components/contents/components/ui/icons/src/main/res/drawable", true);
    //Explicit request of the V3 version of the API
    request.setRequestHeader("Accept", "application/vnd.github.v3+json");
    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            let response = JSON.parse(request.response);
            if (response.message) {
                //Something went wrong
                addSingleItemToTable("Error: " + response.message);
                return;
            }
            addSingleItemToTable("Loading");
            let promises = [];
            for (let i = 0; i < response.length; i++) {
                let iconName = response[i]['name'].substr(0, response[i]['name'].length - 4);
                promises.push(getFile(iconName, response[i]['download_url']));
            }
            Promise.all(promises).then((values) => {
                document.querySelector("#preview_table > tbody").innerHTML = "";
                for (let i = 0; i < values.length; i++) {
                    let name = values[i][0], svg = values[i][1];
                    addToTable(name, htmlToElement(svg));
                }
            });
        }
    };
    request.send(null);
})();