class Engine {
    constructor(bootstrap) {
        this.globalThis = window.this;
        this.app = bootstrap;
        this.selector = this.app.selector;
        this.dataInit = this.app.data.bind(this);
        this.actionsInit = this.app.actions.bind(this);
        this.templateInit = this.app.template.bind(this);
        this.afterViewLoadedInit = this.app.afterViewLoaded.bind(this);
        this.data;
        this.actions;
        this.afterViewLoaded;
        this.initialise();
    }

    setData(dataObject) {
        for (const [incKey, incVal] of Object.entries(dataObject)) {
            for (const [dataKey] of Object.entries(this.data)) {
                if (incKey === dataKey) {
                    this.data[incKey] = incVal;
                }
            }
        }
        this.render();
    }

    initialise() {
        this.data = this.dataInit();
        this.actions = this.actionsInit();
        this.template = this.templateInit();
        this.afterViewLoaded = this.afterViewLoadedInit;
        this.render();
    }

    render() {
        const template = this.templateInit();
        const buildTemplate = (template) => {
            return new Promise((resolve, reject) => {
                if (this.select(!this.app.selector)) {
                    customElements.define(this.app.selector, class extends HTMLElement {
                        connectedCallback() {
                          this.innerHTML = template;
                          resolve();
                        }
                      });
                } else {
                    this.select(this.app.selector).innerHTML = template;
                    resolve();
                }
            });
        }
        buildTemplate(template).then(() => {
            this.afterViewLoaded();
        });
    }

    select(element) {
        return document.querySelector(element);
    }
}


 new Engine({

    selector: 'my-element',

    data() {
        return {
            myOutput: 'One',
            myOutTwo: 'Two',
            myOutThree: 'Three'
        }
    },

    actions() {
        return {
            logInput: (event) => {
                this.setData({
                    myOutput: event
                })
            }
        }
    },

    template() {
        return (`<div>
                    my template<br/>
                    ${this.data.myOutput}, <br/> ${this.data.myOutTwo}, <br/>${this.data.myOutThree}<br/>
                    <input type="text" id="abc" value="${this.data.myOutput}"/><br/>
                    <input type="text" id="efg" /><br/>
                    <input type="text" id="hij" /><br/>
                </div>`);
    },

    afterViewLoaded() {
            this.select('#abc').addEventListener('blur', (e) => {
                this.setData({
                    myOutput: event.target.value
                })
            })

            this.select('#efg').addEventListener('blur', (e) => {
                this.setData({
                    myOutTwo: event.target.value
                })
            })

            this.select('#hij').addEventListener('blur', (e) => {
                this.setData({
                    myOutThree: event.target.value
                })
            })
    }

})