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 apiCall(url) {
    ajax(url)
        .then(function (result) {
            console.log(result);
            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-block";
        });
}

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

apiCall(apiUrl);

heartIcon.addEventListener("click", () => {
    likesLoader.style.display = "inline-flex"
    likesCount.style.display = "none";
    heartIcon.style.pointerEvents = 'none';

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

    apiCall(apiUrl);
});