var App = React.createClass({
  getInitialState: function () {
    return {data: null};
  },
  componentDidMount: function () {
    superagent
    .get('./data.json')
    .accept('json')
    .end(function (res) {
      this.setState({data: res.body});
    }.bind(this));
  },
  render: function () {
    return (
      <div className='container'>
        <AlbumList data={this.state.data} />
      </div>
    );
  },
});

var AlbumList = React.createClass({
  render: function () {
    var data = this.props.data;

    if (!this.props.data) {
      return null;
    }

    var albums = this.props.data.map(function (album) {
      return <Album name={album.title} artist={album.artist} data={album} />;
    });

    return (
      <div className='album-list'>
        {albums}
      </div>
    )
  },
});

function randomClr() {
  var color = ['navy', 'blue', 'olive', 'orange', 'red', 'maroon'];
  return color[Math.floor(Math.random() * color.length)];
}

var Album = React.createClass({
  getInitialState: function () {
    return {shouldShowSongs: false, color: randomClr()};
  },
  render: function () {
    var imageClassName = 'image' +
      (!this.props.data.image ? ' no-image bg-' + this.state.color : '');

    var image = this.props.data.image ?
      <img data-echo={this.props.data.image} /> :
      <div>{this.props.name}</div>;

    return (
      <a className='album' target='_blank'
         href={'https://www.google.co.uk/#q='+this.props.artist+' '+this.props.name}>
        <div className={imageClassName}>
          {image}
        </div>
        <div className='name'>{this.props.name}</div>
        <div className='artist'>{this.props.artist}</div>
      </a>
    );
  },
});

React.render(<App />, document.getElementById('app'));

echo.init({offset: 200});
