// Create a data store
// You can use setters directly on a component, too
// The first argument on a setter is the store/component data
// You can pass in as many other arguments as you'd like
var store = new Reef.Store({
	data: {
		heading: 'My Todos',
		todos: ['Swim', 'Climb', 'Jump', 'Play']
	},
	setters: {
		addTodo: function (props, todo) {
			props.todos.push(todo);
		}
	}
});

// Use the store in the app
var app = new Reef('#app', {
	store: store,
	template: function (props) {
		return `
			<h1>${props.heading}</h1>
			<ul>
				${props.todos.map(function (todo) {
					return `<li>${todo}</li>`;
				}).join('')}
			</ul>`;

	}
});

app.render();

// After 3 seconds, try to update the data
// This won't do anything, because setters were defined
// When setters are defined, only explicit setter functions can update state
// The state returned from app.data is an immutable, so store.data is never updated
setTimeout(function () {
	store.data.todos.push('Take a nap... zzzz');
	console.log('Update state directly', store.data.todos);
}, 3000);

// After 6 seconds, add a todo using the addTodo setter
// This WILL update the state and render an updated UI
setTimeout(function () {
	store.do('addTodo' ,'Take a nap... zzzz');
	console.log('Update state with setter', store.data.todos);
}, 6000);