/**
 * @param data: {title: str
 *               itemArray: array, each item in the array is an obj {attr:str, wMax:numeric, max: numeric, radius: numeric, key: str}
 *               key: str
 *              }
 */
// TODO: explain what those attribute in param data are in comments
export function renderTemplate(data){

    let adjustment = 0,
        titleTemplate = "",
        itemTemplate = "<ul>";


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

    for(let item of data.itemArray){
        adjustment = -(item.wMax * 0.25);
        itemTemplate = itemTemplate + `<li class="legend-item ${item.attr}"><svg style="top: ${adjustment}px; left: ${adjustment}px;" width="${item.wMax}" height="${item.wMax}"><circle cx="${item.max}" cy="${item.max}" r="${item.radius}"></circle></svg> <span class="key">${item.key}</span></li>`
    }

    itemTemplate = itemTemplate + "<ul>";

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