if(!app.helpers) app.helpers = {}
/**
 * Mixing add-in methods to your view instance.
 * All of this should not be a helper, but inherited this from WindozDomContent, but not my framework anymore.
 * @category MyEic
 */
app.helpers.formBuilder = {

    fieldsFromJSON(fieldsObj, fieldsValues, fieldsetLabel=null, changeCB=null){
        let allFields = []
        for(const propName in fieldsObj){
            const fieldRow = ui.create(`<div class="cols-2"><label>${fieldsObj[propName].label}</label></div>`)
            let component
            switch(fieldsObj[propName].type){
                case 'number':
                    component = document.createElement('input')
                    component.setAttribute('name',propName)
                    component.setAttribute('type','number')
                    if('min' in fieldsObj[propName]) component.setAttribute('min', fieldsObj[propName].min)
                    if('max' in fieldsObj[propName]) component.setAttribute('max', fieldsObj[propName].max)
                    if(typeof(changeCB) == 'function') component.addEventListener('input', (evt) => { changeCB(evt, component) })
                    break
                case 'string': 
                    component = document.createElement('input')
                    component.setAttribute('name',propName)
                    component.setAttribute('type','text')
                    if(typeof(changeCB) == 'function') component.addEventListener('input',  (evt) => { changeCB(evt, component) })
                    break
                case 'boolean':                        
                    component = document.createElement('bz-toggler')
                    component.setAttribute('name',propName)
                    component.setAttribute('trueValue','1')
                    component.setAttribute('falseValue','0')
                    fieldRow.append(component.el)                    
                    if(typeof(changeCB) == 'function') component.addEventListener('change',  (evt) => { changeCB(evt, component) })
                    break                    
                case 'list':
                    component = document.createElement('bz-select')
                    component.setAttribute('name', propName)
                    component.fillOptions( fieldsObj[propName].choices.map(item => {
                        return({ markup: `${item}`, value: item})
                    }))
                    if(typeof(changeCB) == 'function') component.addEventListener('change',  (evt) => { changeCB(evt, component) })
                    break
                default:
                    console.warn(`Unknown field type ${fieldsObj[propName].type}`)
            }
            if(component){
                component.classList.add('formbuilder-field')
                component.value = this.getPathInObj(fieldsValues, propName) || fieldsObj[propName].default
                fieldRow.append(component)
                allFields.push(fieldRow)
            }
        }
        if(fieldsetLabel!==null){
            const fieldset = document.createElement('fieldset')
            if(fieldsetLabel!=''){
                const lgd = document.createElement('legend')
                lgd.innerHTML = fieldsetLabel
                fieldset.append(lgd)
            }
            fieldset.append(...allFields)
            return([fieldset])
        } else {
            return(allFields)
        }
    },

    getPathInObj(obj, path){
        const parts = path.split('.')
        let target = obj
        for (let i = 0; i < parts.length - 1; i++) {
            const key = parts[i]
            if(!target[parts[i]]) return(null)
            target = target[parts[i]]
        }
        return(target[parts[parts.length - 1]] )
    },

    getFieldsValues(rootSel){
        const result = {}
        document.querySelectorAll(`${rootSel} .formbuilder-field`).forEach(el => {
            const path = el.name.split('.')
            let target = result
            for (let i = 0; i < path.length - 1; i++) {
                const key = path[i]
                if (!target[key] || typeof target[key] !== 'object') {
                    target[key] = {}
                }
                target = target[key]
            }
            target[path[path.length - 1]] = el.value
        })
        return(result)
    },

    getFieldValue(rootSel, name){
        const comp = document.querySelector(`${rootSel} .formbuilder-field[name="${name}"]`)
        if(comp) return(comp.value)
        else return(null)
    },

}