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

var Authenticate = React.createClass({
    logout: function () {
        this.props.refreshAuth(null, null);
        window.location.href = "/";
    },
    refreshToken: function (event) {
        event.preventDefault();
        var self = this;
        $.ajax({
            url: '/refresh_token',
            data: {
                'refresh_token': self.props.auth.refresh_token
            },
            success: function (data) {
                self.props.refreshAuth(data.access_token, self.props.auth.refresh_token);
            },
            error: function (xhr, status, err) {
                console.error(status, err);
            }
        });
    },
    render: function () {
        var auth;
        var Nav = ReactBootstrap.Nav,
            NavItem = ReactBootstrap.NavItem,
            Navbar = ReactBootstrap.Navbar;

        if (this.props.auth.access_token == null) {
            auth = (
                <Nav pullRight>
                    <NavItem eventKey={1} href="/login"><strong>Login With Spotify</strong></NavItem>
                </Nav>
            );
        }
        else {
            auth = (
                <Nav pullRight>
                    <NavItem eventKey={2} onClick={this.refreshToken} href="#">Refresh my token</NavItem>
                    <NavItem eventKey={3} onClick={this.logout} href="#"><strong>Logout</strong></NavItem>
                </Nav>
            );
        }

        return (
            <Navbar fluid={true}>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="/">Duplicate Finder</a>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem eventKey={1} href="/" active>Finder</NavItem>
                    </Nav>
                    {auth}
                </Navbar.Collapse>
            </Navbar>
        );
    }
});

module.exports = Authenticate;