class View {
    constructor(tag = 'div') {
        this.root = document.createElement(tag)
    }

    $(sel) {
        return this.root.querySelector(sel)
    }

    $$(sel) {
        return this.root.querySelectorAll(sel)
    }

    on(elm, evt, cb) {
        if (typeof elm === 'string') {
            elm = this.$(elm)
        }

        elm.addEventListener(evt, cb)
    }
}

class DefaultView extends View{
    constructor(object) {
        super('div')
        this.object = object;
        this.fields = {}
        this.subviews = {}
    }

    render() {
        Object.keys(this.object.json).forEach(key => {
            let node = this.getNode(key);
            if (node) this.root.appendChild(node)
        })
        return this
    }

    getNode(name, value=null) {
        if (this.fields[name]) {
            return this.fields[name]
        }
        value = value === null ? this.object.json[name] : value

        if (value instanceof StructuredNode) {
            this.subviews[name] = (new DefaultView(value)).render()
            const wrap = document.createElement('div')
            wrap.classList.add('wrapper')
            if (name.indexOf('[') === -1) {
                wrap.innerHTML += '<b>' + name + ':</b>'
            }
            wrap.appendChild(this.subviews[name].root)
            this.fields[name] = wrap
        } else if (value instanceof Array) {
            const elm = document.createElement('ul')
            elm.innerHTML += '<b>' + name + ':</b>'
            value.forEach((o, i) => {
                const li = document.createElement('li')
                li.appendChild(this.getNode(name+'['+i+']',o))
                elm.appendChild(li)
            })
            this.fields[name] = elm
        } else {
            if (value === null || name === 'uid')
                return

            const elm = document.createElement('p')

            elm.innerHTML = `${name}: ${value}`
            this.fields[name] = elm
        }

        return this.fields[name]
    }
}