var React                   = require('react');
var Router                  = require('react-router');
var Menu                    = require('./components/Menu');
var ErrorMessages           = require('./components/ErrorMessages');
var initalizer              = require('./stores/initalizer');
var FeatureToggleStore      = require('./stores/FeatureToggleStore');
var StrategyStore           = require('./stores/StrategyStore');
var ArchiveStore            = require('./stores/ArchivedToggleStore');
var Link = Router.Link;
var RouteHandler = Router.RouteHandler;

var UnleashApp = React.createClass({
    contextTypes: {
        router: React.PropTypes.func
    },

    getInitialState: function() {
        return {
            features:           FeatureToggleStore.getFeatureToggles(),
            strategies:         StrategyStore.getStrategies(),
            archivedFeatures:   ArchiveStore.getArchivedToggles()
        };
    },

    onFeatureToggleChange: function() {
        this.setState({
            features: FeatureToggleStore.getFeatureToggles()
        });
    },

    onStrategiesChange: function() {
        this.setState({
            strategies: StrategyStore.getStrategies()
        });
    },

    onArchiveChange: function() {
        this.setState({
            archivedFeatures: ArchiveStore.getArchivedToggles()
        });
    },

    componentDidMount: function() {
        this.unsubscribeFS = FeatureToggleStore.listen(this.onFeatureToggleChange);
        this.unsubscribeSS = StrategyStore.listen(this.onStrategiesChange);
        this.unsubscribeAS = ArchiveStore.listen(this.onArchiveChange);
    },
    componentWillUnmount: function() {
        this.unsubscribeFS();
        this.unsubscribeSS();
        this.unsubscribeAS();
    },

    componentWillMount: function() {
        initalizer(30);
    },

    renderLink: function(id, label) {
        return    (
            <Link to={id} className="nav-element centerify" activeClassName="nav-active">
                <span className="topbar-nav-svg-caption caption showbydefault no-break">{label}</span>
            </Link>
        );
    },

    render: function () {
        return (
            <div>
                <Menu>
                    {this.renderLink("features",    "Toggles")}
                    {this.renderLink("strategies",  "Strategies")}
                    {this.renderLink("log",         "Log")}
                    {this.renderLink("archive",     "Archive")}
                </Menu>
                <div className="container">
                    <div className="page">
                        <ErrorMessages />
                        <div className="mod shadow mrn pan">
                            <div className="inner pan">
                                <div className="bd">
                                    <RouteHandler
                                            features={this.state.features}
                                            strategies={this.state.strategies}
                                            archivedFeatures={this.state.archivedFeatures}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});


module.exports = UnleashApp;