var Fluxible = require('fluxible');
var React = require('react');

// Action
var action = function (context, payload, done) {
    context.dispatch('FOO_ACTION', payload);
    done();
};

// Store
var createStore = require('fluxible/addons').createStore;
var Store = createStore({
    storeName: 'FooStore',
    handlers: {
        'FOO_ACTION': 'fooHandler'
    },
    initialize: function () { // Set the initial state
        this.foo = null;
    },
    fooHandler: function (payload) { 
        this.foo = payload;
    },
    getState: function () {
        return {
            foo: this.foo
        }
    }
});

// Component
var App = React.createClass({
    mixins: [Fluxible.FluxibleMixin], // Calls onChange when storeListeners emit change
    statics: {
        storeListeners: [Store]
    },
    getInitialState: function () {
        return this.getStore(Store).getState();
    },
    onChange: function () {
        this.setState(this.getStore(Store).getState());
    },
    render: function () {
        return <span>{this.state.foo}</span>
    }
});

// App
var fluxibleApp = new Fluxible({
    component: App
});
fluxibleApp.registerStore(Store);

// Bootstrap
var context = fluxibleApp.createContext();
context.executeAction(action, 'bar', function () {
    console.log(React.renderToString(context.createElement()));
});