import ARCS from '../build/arcs.js';

let UIMapper ;

UIMapper = ARCS.Component.create(
    function(obj) {
        let self = this;
        
        // returns a map function 
        const mapFunction = function(param, field, format) {
            let fields = field.split('.');
            let params = param.split('.');
            let eltField = document.getElementById(fields[0]);
            for(let i=1; i < fields.length-1; i++) {
                eltField = eltField[fields[i]]; 
            }
            
            let func = null;
            if (format !== undefined) {
                func = new Function(`return ${format}`)();
            }
            
            
            return function() {
                let value = arguments[params[0]];
                for (let i=1; i < params.length; i++) {                    
                    value = value[params[i]];
                }            
                eltField[fields[fields.length-1]] = (func)?((typeof func === 'function')?func(value):func):value;                
            }
        };
        
        
        for(let p in obj) {
            let slotName = p;
            let slotFunction = function(pobj) {
                return function() {
                    pobj.map( elt => {
                        mapFunction(elt.param, elt.field,elt.format).apply(null, arguments);                    
                    });
                };
            }
            if (self.slots.indexOf(slotName) < 0) {
                self.slots.push(slotName);
                self[slotName] = slotFunction(obj[p]);                
            }
        };
        
    }, [], []
);

export default {UIMapper : UIMapper};