import $ from 'jquery';
import UIkit from 'uikit';
window.jQuery = $;
window.$ = $;
window.UIkit = UIkit;

window.show_login_box = () => {

    $("#top-bar-username a").hide();
    $("#top-bar-login-box").val($("#top-bar-username a").text().trim()).show().focus();

}

window.hide_login_box = () => {

    $("#top-bar-username a").show();
    $("#top-bar-login-box").hide()

}



$('#top-bar-login-box').on('keyup keypress', function(e) {
	var keyCode = e.keyCode || e.which;
	if (keyCode === 13) {
	    e.preventDefault();
	    return false;
	}
    });


$("#top-bar-login-box").keyup(function(e) {
    if (e.keyCode == "13") {
        login();
    }
});

window.login = () => {
    var CSRF_TOKEN = $("input[name=_csrf_token]").val();
    var username = $("#top-bar-login-box").val().trim();
    $.ajax({
        url: "/api/join",
        method: 'POST',
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN);
        },
        data: {
            username: username,
            old_username: $("#top-bar-username a").text().trim()
        }
    }).done(function(response) {
        console.log(response);
        UIkit.notification(response['data']);
        hide_login_box();        
        $("#top-bar-username a").text(response['username']);        
    });
}

window.deleteCard = (id) => {
    var CSRF_TOKEN = $("input[name=_csrf_token]").val();
    $.ajax({
        url: "/api/cards/" + id,
        method: 'DELETE',
        beforeSend: function(xhr) {
            xhr.setRequestHeader("X-CSRF-Token", CSRF_TOKEN);
        }
    }).done(function(response) {
        UIkit.notification(response['data']);
        $("div#card-" + response['card']).remove();
    });
}

window.chooseGiphy = (url) => {
	$("img.card-picture").attr("src", url);
	$("input#card_picture").val(url);
    $(".uk-close").click();
}
window.giphySearch = () => {
    var query = $("#giphySearch").val().trim().replace(/ /g, "+");
    const api_url = "https://api.giphy.com/v1/gifs/search?api_key=GUHvLYHRcNgPAIKt4PNZcjYw5FBeBX0F&q=" + query + "&limit=25&offset=0&rating=R&lang=en";
    $.ajax({
        url: api_url,
        method: 'GET'
    }).done(function(response) {

        // This is the API response data. It's a JSON object of 25 gifs
        console.log(response.data);
        $("#giphySearchResults").html("");
        response.data.forEach(function(i) {
            var giphyURL = i.images.fixed_height.url;
            $("#giphySearchResults").append(
                "<a href='javascript:chooseGiphy(" +
                '"' +
                giphyURL +
                '"' +
                ");'><img class='search-result' src='" + giphyURL + "'/></a>"
            );
        });

    });
};

$("#giphySearch").keyup(function(e) {
    if (e.keyCode == "13") {
        giphySearch();
    }
});

$("#giphySearchButton").click(function(e) {
    giphySearch();
});


$('#imageModalContent').on('keyup keypress', function(e) {
	var keyCode = e.keyCode || e.which;
	if (keyCode === 13) {
	    e.preventDefault();
	    return false;
	}
    });