var dom = Bloop.dom;

// components

var App = Bloop.createClass({
  getInitialState: function() {
    return { settings: { bigFonts: false,
                         color: null } };
  },

  changeSetting: function(name, value) {
    this.state.settings[name] = value;
  },

  render: function() {
    return dom.div(
      { className: 'app ' + (this.state.settings.bigFonts ? 'big' : ''),
        style: { backgroundColor: this.state.settings.color }
      },
      dom.h1('My App'),
      Settings({
        bigFonts: this.state.settings.bigFonts,
        onChange: this.changeSetting
      })
    );
  }
});

var Settings = Bloop.createClass({
  randomizeColor: function() {
    this.props.onChange(
      'color',
      'rgb(0,' + (Math.random() * 125 | 0) + ',0)'
    );
  },

  reset: function() {
    this.props.onChange('bigFonts', false);
    this.props.onChange('color', null);
  },

  render: function() {
    return dom.div(
      { className: 'settings' },
      dom.div(
        dom.input({
          type: 'checkbox',
          checked: this.props.bigFonts,
          onClick: this.props.onChange.bind(
            null,
            'bigFonts',
            !this.props.bigFonts
          )
        }),
        'big fonts'
      ),
      dom.div(dom.button({
        onClick: this.randomizeColor
      }, 'random color')),
      dom.div(dom.button({ onClick: this.reset }, 'reset'))
    );
  }
});

// render

var app = App();

function render() {
  Bloop.renderComponent(app, document.body);
  requestAnimationFrame(render);
}

render();