var React = require('react');
var TVML = require('react-tvml');


var ArtistAlbumListItem = React.createClass({
    render: function() {
        return (
            <lockup>
                <img src={this.props.album.cover} width="256" height="256" />
                <title>{this.props.album.name}</title>
            </lockup>
        );
    }
});

var ArtistAlbumList = React.createClass({
    render: function() {
        var albums = this.props.albums.map(function(album) {
            return (
          <ArtistAlbumListItem key={album.id} album={album} />
        );
        });

        return (
            <grid>
                <section>
                    {albums}
                </section>
            </grid>
        );
    }
});

var ArtistView = React.createClass({
    getInitialState: function() {
        return {
            albums: []
        }
    },
    componentDidMount: function() {
        var self = this;

        var artistId = self.props.id;
        var url = 'https://api.spotify.com/v1/artists/' + artistId + '/albums';

        console.log('I want to load JSON.');

        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.status === 200 && xhr.readyState === 4) {
                var json = JSON.parse(xhr.responseText);

                var jsonAlbums = [];

                for (var i = 0; i < json.items.length; i++) {
                    var jsonAlbum = json.items[i];

                    jsonAlbums.push({
                        name: jsonAlbum.name + "",
                        cover: jsonAlbum.images[0].url + ""
                    });
                }


                if (self.isMounted()) {
                    self.setState({
                        albums: jsonAlbums
                    });
                }
            }
        };
        xhr.send();
    },
    render: function() {
        return (
            <catalogTemplate>
                <banner>
                    <title>CHVRCHES</title>
                </banner>
                <list>
                    <section>
                        <listItemLockup>
                            <title>Albums</title>
                            <relatedContent>
                                {this.state.albums.length > 0 ? <ArtistAlbumList albums={this.state.albums} /> : <activityIndicator><title>Loading</title></activityIndicator>}
                            </relatedContent>
                        </listItemLockup>
                    </section>
                </list>
            </catalogTemplate>
        );
    }
});

TVML.render(<ArtistView id="3CjlHNtplJyTf9npxaPl5w" />);