'use strict';

var data = [
    {id: 1, name: "Mine"},
    {id: 2, name: "Other"},
    {id: 3, name: "A third"}
];

var dups = [
    {
        track: {
            album: {
                id: "53fWaWYPGghRHppKdD7A2S",
                name: "El Taxi (feat. Pitbull, Sensato)"
            },
            artists: [
                {
                    id: "6W0XSFVBD0xJlJhahPSlKZ",
                    name: "Osmani Garcia"
                }, {
                    id: "0TnOYISbd1XYRBk9myaseg",
                    name: "Pitbull"
                }, {
                    id: "7iJrDbKM5fEkGdm5kpjFzS"
                }
            ],
            href: "https://api.spotify.com/v1/tracks/1qpbJ8GiPc706AfGqZAIei",
            id: "1qpbJ8GiPc706AfGqZAIei",
            name: "El Taxi"
        }
    }, {
        track: {
            album: {
                id: "53fWaWYPGghRHppKdD7A2S",
                name: "El Taxi (feat. Pitbull, Sensato)"
            },
            artists: [
                {
                    id: "6W0XSFVBD0xJlJhahPSlKZ",
                    name: "Osmani Garcia"
                }, {
                    id: "0TnOYISbd1XYRBk9myaseg",
                    name: "Pitbull"
                }, {
                    id: "7iJrDbKM5fEkGdm5kpjFzS"
                }
            ],
            href: "https://api.spotify.com/v1/tracks/1qpbJ8GiPc706AfGqZAIei",
            id: "zkefjzkefn",
            name: "El Taxi"
        }
    }
];

var Duplicate = React.createClass({
    render: function () {
        var authors = "";
        this.props.data.artists.forEach(function (item, index) {
            if (index != 0) {
                authors += ', ';
            }
            authors += item.name;
        });
        return (
            <div className="list-group-item">{this.props.data.name} - {authors}</div>
        );
    }
});

var DuplicatesBox = React.createClass({
    render: function () {
        var duplicates = this.props.data.map(function (duplicate) {
            return (
                <Duplicate data={duplicate.track} key={duplicate.track.id}/>
            );
        });
        return (
            <div className="duplicatesBox list-group">
                {duplicates}
            </div>
        );
    }
});


var Playlist = React.createClass({
    render: function () {
        return (
            <a className="list-group-item">{this.props.name}</a>
        );
    }
});

var PlaylistBox = React.createClass({
    render: function () {
        var playlists = this.props.data.map(function (playlist) {
            return (
                <Playlist name={playlist.name} key={playlist.id}/>
            );
        });
        return (
            <div className="playListBox list-group">
                {playlists}
            </div>
        );
    }
});

var DuplicateFinderBox = React.createClass({
    render: function () {
        return (
            <div className="duplicateFinderBox">
                <div className="col-md-3">
                    <h2>Playlists</h2>
                    <PlaylistBox data={this.props.playlists}/>
                </div>
                <div className="col-md-6">
                    <h2>Duplicates</h2>
                    <DuplicatesBox data={this.props.dups}/>
                </div>
            </div>
        )
    }
});

ReactDOM.render(
    <DuplicateFinderBox playlists={data} dups={dups}/>,
    document.getElementById('content')
);

var Authenticate = React.createClass({
    render: function () {
        var accessToken = "";
        if (accessToken == "") {
            return (
                <ul className="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><strong>Login With Spotify</strong></a>
                    </li>
                </ul>
            );
        }
        else {
            return (
                <ul className="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">Refresh my token</a>
                    </li>
                    <li>
                        <a href="#"><strong>Logout</strong></a>
                    </li>
                </ul>
            );
        }
    }
});

ReactDOM.render(
    <Authenticate />,
    document.getElementById('authentication')
);