'use strict';
var React = require('react');
var $ = require('jquery');

var DuplicateFinderBox = require('./duplicate-finder-box');
var Authenticate = require('./authenticate');

/**
 * Obtains parameters from the hash of the URL
 * @return Object
 */
function getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while (e = r.exec(q)) {
        hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
}

var App = React.createClass({
    getInitialState: function () {
        var params = getHashParams();
        var access_token = params.access_token || null;
        var refresh_token = params.refresh_token || null;

        return {
            access_token: access_token,
            refresh_token: refresh_token,
            playlists: null,
            playlistsLoading: true
        };
    },
    getPlaylists: function () {
        this.setState({
            playlistsLoading: true
        });
        var self = this;
        $.ajax({
            url: '/get_playlists',
            data: {
                'access_token': this.state.access_token
            },
            success: function (data) {
                var pl = data.data;
                self.setState({
                    playlists: pl,
                    playlistsLoading: false
                });
            },
            error: function (xhr, response, err) {
                console.error(response, err);
            }
        });
    },
    isLoggedIn: function () {
        return !(this.state.access_token == null && this.state.refresh_token == null);
    },
    refreshAuth: function (access, refresh) {
        this.setState({
            access_token: access,
            refresh_token: refresh
        });

        if (!(access == null && refresh == null)) {
            this.getPlaylists();
        }
    },
    componentDidMount: function () {
        if (this.isLoggedIn()) {
            this.getPlaylists();
        }
    },
    render: function () {
        var auth = {
            access_token: this.state.access_token,
            refresh_token: this.state.refresh_token
        };
        var content = <p>Please log in with Spotify :)</p>;
        if (this.isLoggedIn()) {
            var playlistsLoading = this.state.playlistsLoading;
            content = (
                <DuplicateFinderBox playlistsLoading={playlistsLoading} auth={auth} playlists={this.state.playlists}/>
            );
        }

        return (
            <div>
                <Authenticate auth={auth} refreshAuth={this.refreshAuth}/>
                <div className="container-fluid">
                    {content}
                </div>
            </div>
        );
    }
});

module.exports = App;