const heartIcon = document.querySelector(".heart-icon");
const likesCount = document.getElementById("likes-count");
const likesLoader = document.getElementById("likes-loader");

likesLoader.style.display = "none"

let likesAmount = likesCount.innerHTML;

function onLoadAndClick(){
    likesLoader.style.display = "inline-flex"
    likesCount.style.display = "none";
    heartIcon.style.pointerEvents = 'none';
}

function apiCall(url, event) {
    onLoadAndClick();
    ajax(url)
        .then(function (result) {
            console.log(result);
            if(event === "click"){
                heartIcon.classList.toggle("liked");
            }
            likesCount.innerHTML = result;
            likesLoader.style.display = "none"
            likesCount.style.display = "inline-flex";
            heartIcon.style.pointerEvents = 'auto';
        })
        .catch(function () {
            likesLoader.style.display = "none";
            likesCount.style.display = "inline-flex";
        });
}

var apiUrl = serviceUrl + "/GetPostLikes?siteId=" + siteId + "&postId=" + postId;

apiCall(apiUrl);

heartIcon.addEventListener("click", () => {
    if (!heartIcon.classList.contains("liked")) {
        apiUrl = serviceUrl + "/LikePost?siteId=" + siteId + "&postId=" + postId;
    } else {
        apiUrl = serviceUrl + "/DislikePost?siteId=" + siteId + "&postId=" + postId;
    }

apiCall(apiUrl, "click");
});