$(document).ready(function(){

    var TIMER = "";
    $(".showBusinessCard").mouseenter(function(event){
        var xCordinate = event.clientX;
        var currentBusiness = $(this);
        TIMER = setTimeout(function(){
            showBusinessCard(currentBusiness, xCordinate);
        }, 250);
    });

    $(".showBusinessCard").mouseout(function(){
        window.clearTimeout(TIMER);
    });

    $(document).on('click', ".showBusinessCard", function(){
        window.clearTimeout(TIMER);
    });
});

function showBusinessCard(businessAnchor, xCordinate){

    var parentRow = $(businessAnchor).parent();
    var parentLeft = $(parentRow)[0].offsetLeft;
    var currentLeft = xCordinate - parentLeft;
    // hide all business cards
    $(".business-card-container").hide();

    //get business Id & business slug from business anchor
    var businessId = $(businessAnchor).attr("data-businessId");
    var businessSlug = $(businessAnchor).attr("data-businessSlug");
    if($(parentRow).find(".business-card-container").length >0)
    {
        $(parentRow).find(".business-card-container").css("left", currentLeft);
        $(parentRow).find(".business-card-container").show();
    }
    else{
        //call api and get basic information to display
        var businessCardInfo = getBusinessCard(businessId, businessSlug);
        businessCardInfo = JSON.parse(businessCardInfo);
        if(businessCardInfo['status'] == "success")
        {
            //arrange received data in card
            displayBusinessCard(businessAnchor, businessCardInfo['content'][0], currentLeft);
        }
        else{
            console.log(businessCardInfo['content']);
        }
    }
}

function displayBusinessCard(businessAnchor, businessCardInfo, currentLeft){
    
    var busienssName = businessCardInfo['businessName'];
    var categoryName = businessCardInfo['category'];
    var location = businessCardInfo['location'];
    var phone = businessCardInfo['phoneNumber'];
    var email = businessCardInfo['emailAddress'];
    var website = businessCardInfo['website'];
    var rating = businessCardInfo['rating'];
    var reviews = businessCardInfo['numReviews'];
    var num = Math.trunc(rating);
    var decimal = rating - num;
    var stars = "";
    var slug = businessCardInfo['businessSlug'];
    var img = businessCardInfo['icon'];

    var phoneSpan = "";
    var mailSpan = "";
    var webSpan = "";

    if(rating == 0)
    {
        stars = '<span class="material-icons">star_outline</span><span class="material-icons">star_outline</span><span class="material-icons">star_outline</span><span class="material-icons">star_outline</span><span class="material-icons">star_outline</span>';
    }


    for(var i = 0; i<num; i++)
    {
        stars += '<span class="material-icons">star</span>';
    }
    if(decimal>0.25 && decimal < 0.75)
    {
        stars += '<span class="material-icons">star_half</span>';
    }
    else if(decimal>0.75)
    {
        stars += '<span class="material-icons">star</span>';
    }

    //create phone div if phone number present
    if(phone != "" && phone !== null)
    {   
        phoneSpan = '<a href="tel:'+phone+'"><div class="business-card-phone"><span class="icon material-icons">call</span>'+phone+'</div></a>';
    }

    //create email div if email present
    if(email != "" && email !== null)
    {
        mailSpan = '<div class="business-card-email"><span class="icon material-icons">email</span>'+email+'</div>';
    }

    //create website div if website present
    if(website != "" && website !== null)
    {
        webSpan = '<div class="business-card-web"><span class="icon material-icons">language</span>'+website+'</div>';
    }

    var card = '<div class="business-card-container" style="left:'+currentLeft+'px"><div class="business-intro"><div class="business-name">'+busienssName+'</div><div class="business-subheading"> '+categoryName+' in '+location+'</div></div><div class="business-card-icon"> <img src="/assets/img/icons/'+img+'" alt=""></div><div class="business-card-info">'+phoneSpan+mailSpan+webSpan+'<div class="business-rating"><div class="rating-stars">'+stars+'</div><div class="rating-desc"> '+rating+' based on '+reviews+' reviews</div></div><div class="business-card-cta"><a href="/places/'+slug+'">Know more</a></div></div></div>';
    $(businessAnchor).parent().append(card);
}

function getBusinessCard(businessId, businessSlug){
    var res = false;
    $.ajax({
        url: "/apis/get-business-card-info",
        type: "POST",
        async: false,
        data: {"businessId":businessId, "businessSlug":businessSlug},
        success: function(response){
            res =  response;
        }
    });
    return res;
}

// basic card functionality
$(document).on("mouseleave", ".business-card-container", function(){
    $(this).hide();
});