(function ($, Drupal, drupalSettings) {
    'use strict';
    Drupal.typnotif = { };
    var index = 1;
    var shopping = false;
    var sale = false;
    var path = drupalSettings.path.baseUrl;
    //var path = 'https://www.yellowpages.co.th/';
    var currentPath = drupalSettings.path.currentPath;
    Drupal.typnotif.createListView = function(result, type){
        let html = '';
        if(type === 'shopping'){
            html = "<ul class='ul-notification' id='ul-shopping-notification'>";
            for (let i = 0; i < result.length; i++) {
                //var url = drupalSettings.path.baseUrl+"rfq/confirm/#confirm-"+result[i]['customerid']+"-"+result[i]['rfqid'];
                let url = path + currentPath +"/rfq/confirm/#confirm-"+result[i]['customerid']+"-"+result[i]['rfqid'];
                html += "<li class='shopping-cart-item'>";
                html += "<div class='col-md-12 col-sm-12 col-xs-12 shopping-tool' style='display: none;'><a href='#' class='btn btn-shopping-tool-delete' data-id='"+result[i]['_id']+"'><i class='fa fa-times' aria-hidden='true'></i></a></div>";
                html += "<a href='"+url+"' target='_blank'><div class='notification-list col-md-12 col-sm-12 col-xs-12'>";
                html += "<div class='notification-logo col-md-3 col-sm-3 col-xs-3'>";
                if(result[i]['logo']){
                    html += "<img class='img-responsive img-logo' src='"+result[i]['logo']+"'>";
                }
                html += "</div>";
                html += "<div class='notification-details col-md-9 col-sm-9 col-xs-9'>";
                html += "<p class='notif-details-humanname'>"+result[i]['humanname']+"</p>";
                html += "<div class='notif-details-count col-md-6 col-sm-6 col-xs-6'><p class='details-count'>"+Drupal.t('Amount')+" : "+result[i]['count']+"</p></div>";
                html += "<div class='notif-details-total col-md-6 col-sm-6 col-xs-6'><p class='details-total'>"+Drupal.t('Price')+" : "+result[i]['total']+" "+Drupal.t('THB.')+"</p></div>";
                html += "<p class='notif-details-about'>"+Drupal.t('About', {}, { context: "time" })+" "+result[i]['date']+"</p>";
                html += "</div>";
                html += "</div></a>";
                html += "</li>";
            }
            html += "</ul>";
        } else if (type === 'sale') {
            html = "<ul class='ul-notification'>";
            for (let i = 0; i < result.length; i++) {
                html += "<li><a href='#'><div class='notification-list col-md-12 col-sm-12 col-xs-12'>";
                html += "<div class='notification-logo col-md-3 col-sm-3 col-xs-3'>";
                //html += "<img class='img-responsive img-logo' src='"+result[i]['logo']+"'>";
                if(result[i]['logo']){
                    html += "<img class='img-responsive img-logo' src='"+result[i]['logo']+"'>";
                }
                html += "</div>";
                html += "<div class='notification-details col-md-9 col-sm-9 col-xs-9'>";
                html += "<p class='notif-details-humanname'>"+result[i]['humanname']+"</p>";
                html += "<div class='notif-details-count col-md-6 col-sm-6 col-xs-6'><p class='details-count'>"+Drupal.t('Amount')+" : "+result[i]['count']+"</p></div>";
                html += "<div class='notif-details-total col-md-6 col-sm-6 col-xs-6'><p class='details-total'>"+Drupal.t('Price')+" : "+result[i]['total']+" "+Drupal.t('THB.')+"</p></div>";
                html += "<p class='notif-details-about'>"+Drupal.t('About', {}, { context: "time" })+" "+result[i]['date']+"</p>";
                html += "</div>";
                html += "</div></a>";
                html += "</li>";
            }
            html += "</ul>";
        }

        return html;
    };

    Drupal.typnotif.requestNotification = function(actDel){
        $.getJSON(path+'api/notification/check', function(result){
            // var displayValue = "";
            // if (window.isElitePack === true) {
            //     displayValue = result['_shopping'].length;
            // } else {
            //     displayValue = result['_shopping'].length + "(" + result['_shopping_count'] + ")";
            // }
            // $('#span-shopping-notification').html(displayValue);
            // $('#span-shopping-notification-mobile').html(displayValue);
            // $('#span-shopping-notification-mobile-block').html(displayValue);

            if (result && result['_shopping'] && result['_shopping'].length > 0) {
                var displayValue = "";
                if (window.isElitePack === true) {
                    displayValue = result['_shopping'].length;
                } else {
                    displayValue = result['_shopping'].length + "(" + result['_shopping_count'] + ")";
                }

                $('#span-shopping-notification, #span-shopping-notification-mobile')
                    .html(displayValue)
                    .css('display', 'inline-flex');

            } else {
                $('#span-shopping-notification, #span-shopping-notification-mobile').hide();
            }
        });
    };
    Drupal.typnotif.requestNotification(false);

    /*Document on click*/
    $("#shopping-cart-notification").click(function(){
        /*if(shopping === true){
            $("#span-shopping-notification").fadeOut("slow");
        }*/
    });

    $(document).on("mouseenter", ".shopping-cart-item", function() {
        $(this).find(".shopping-tool").show();
    });

    $(document).on("mouseleave", ".shopping-cart-item", function() {
        $(this).find(".shopping-tool").hide();
    });

    $(document).on("click", ".btn-shopping-tool-delete", function(event) {
        var _id = $(this).data('id');
        var el = $(this);
        $.post(path + currentPath +'api/rfq/document/delete' , { _id: _id }).done(function( response ) {
            if(response.hasOwnProperty("status") && response.status === true){
                el.closest('.shopping-cart-item').remove();
                Drupal.typnotif.requestNotification(true);
            }
        });
        return false;
    });
    $(document).on("click", ".btn-submit-rfq", function(event) {
        setInterval(function(){
            Drupal.typnotif.requestNotification(false);
        }, 2000);
    });
    $('a[data-toggle="popover"]').popover();
})(jQuery, Drupal, drupalSettings);