const { Store } = require('@rebelstack-io/metaflux');

import { Store } from '@rebelstack-io/metaflux';

const storage = new Store(
	{Counter: 1},
	{INCREMENT: (action, state) => {
		state.Counter = state.Counter + 1;
		return {newState: state};
	}
});

storage.dispatch({
	type: 'INCREMENT'
});

storage.on('INCREMENT', action => {
	// GET THE UPDATED VALUE
	const newValue = storage.getState().Counter;
	// UPDATE DOM.
});

import { MetaComponent } from '@rebelstack-io/metaflux';

class MyComponent extends MetaComponent {
	render () {
		this.content = document.createElement('div');
		this.content.innerHtml = `
			<div>
				<h1>Hello World</h1>
			</div>
		`;
		return this.content;
	}
}

window.customElements.define('my-component', MyComponent);

import { MetaComponent, Store } from '@rebelstack-io/metaflux';

const storage = new Store(
	{Counter: 1},
	{INCREMENT: (action, state) => {
		state.Counter = state.Counter + 1;
		return {newState: state};
	}
});

class MyComponent extends MetaComponent {
	// Pass storage to MetaComponent parent
	constructor () {
		super(storage);
	}
	render () {
		const content = document.createElement('div');
		const incrementButton = document.createElement('button');
		content.appendChild(incrementButton);
		// Dispatch Increment action when button is clicked.
		this.incrementButton.addEventListener('click', () => {
			this.storage.dispatch({
				type: 'INCREMENT'
			});
		});
		this.counter = document.createElement('div');
		// Here we get the initial state of Counter and assign it to the counter element.
		this.counter.textContent = this.storage.getState().Counter;
		content.appendChild(this.counter);
		return content;
	}
	// Handle Metaflux Storage events
	handleStoreEvents () {
		return {
			'INCREMENT': action => {
				// When INCREMENT action is dispatch we update the counter element
				this.counter.textContent = this.storage.getState().Counter;
			}
		}
	}
}

window.customElements.define('my-component', MyComponent);

import { MetaContainer } from '@rebelstack-io/metaflux';
import '../components/my-component'; // Here we import our previously defined MetaComponent.

class MyContainer extends MetaContainer {
	render () {
		return `
			<h2>Simple Counter</h2>
			<my-component></my-component>
		`;
	}
}

window.customElements.define('my-container', MyContainer);