import { Component, Graph, Renderer, Router, mount } from './el-ui.js';

class Counter extends Component {
    constructor(props = {}) {
        super();
        this.props = props;
        this._graph = new Graph();
        this._stateNodes = {};
        this._state = {};
        // State nodes (Engram graph seeds)
        this._stateNodes['count'] = this._graph.seed({ type: 'state', name: 'count', content: 0 });
        this._state['count'] = 0;
        // Subscribe to graph activation events
        for (const [key, nodeId] of Object.entries(this._stateNodes)) {
            this._graph.subscribe(nodeId, (node) => {
                this._state[key] = node.content;
                if (this._renderer) this._renderer.patch();
            });
        }
    }

    setState(name, value) {
        if (this._stateNodes[name] !== undefined) {
            this._graph.update(this._stateNodes[name], value);
        }
    }

    render() {
        const __self = this;
        const count = this._state['count'];
        return `<div class="counter" data-el-tag="div"><h1 class="count" data-el-tag="h1">${count  }</h1><div class="buttons" data-el-tag="div"><button data-el-click="() => __self.setState(&#39;count&#39;, count + 1)" data-el-tag="button">+</button><button data-el-click="() => __self.setState(&#39;count&#39;, count - 1)" data-el-tag="button">-</button></div></div>`;
    }

}

class App extends Component {
    constructor(props = {}) {
        super();
        this.props = props;
        this._graph = new Graph();
        this._stateNodes = {};
        this._state = {};
    }

    setState(name, value) {
        if (this._stateNodes[name] !== undefined) {
            this._graph.update(this._stateNodes[name], value);
        }
    }

    render() {
        const __self = this;
        return `<div class="app" data-el-tag="div">${__self._child(Counter, {  })}</div>`;
    }

}

export { Counter, App };

// Mount the app
mount(App, '#app');