/**
 *
 * @param data: {isTogglable: boolean, title: str,
 *               itemArray: array of obj, each is {attr: str, key: str, variable: str, value:numeric}
 *               }
 */
// TODO: explain what the data is in comments
export function renderTemplate(data){

    let titleTemplate = "",
        itemTemplate = "<ul>",
        toggleClass = (data.isTogglable) ? "item-togglable" : "";


    if(data.title){
        titleTemplate = `<div class="legend-title">${data.title}</div>`;
    }

    for(let item of data.itemArray){
        itemTemplate = itemTemplate + `<li class="legend-item ${item.attr} ${toggleClass}" data-key="${data.key}" data-variable="${data.variable}" data-value="${item.key}" data-valueattr="${item.attr}">`;
        itemTemplate = itemTemplate + `<svg width="10" height="10"><rect width="10" height="10" fill="${item.value}"></rect></svg>`;
        itemTemplate = itemTemplate + `<span class="key">${item.key}</span></li>`;
    }

    itemTemplate = itemTemplate + "<ul>";

    return `
        <div class="chart-legend clear">
            ${titleTemplate}${itemTemplate}
        </div>
    `;
}