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) {
            let fields = field.split('.');
            let params = param.split('.');
            return function() {
                let eltField = document.getElementById(fields[0]);
                for(let i=1; i < fields.length-1; i++) {
                    eltField = eltField[fields[i]]; 
                }
                let value = arguments[params[0]];
                for (let i=1; i < params.length; i++) {
                    value = value[params[i]];
                }
                eltField[fields[fields.length-1]] = value;                
            }
        };
        
        
        for(let p in obj) {
            let slotName = p.name;
            let slotFunction = function(pobj) {
                return function() {
                    pobj.mapping.map( elt => {
                        mapFunction(elt.param, elt.field).apply(null, arguments);                    
                    });
                };
            }
            if (self.slots.indexOf(slotName) < 0) {
                self.slots.push(slotName);
                self[slotName] = slotFunction(p);                
            }
        };
        
    }, [], []
);

export default {UIMapper : UIMapper};