wps_js.browsers_meta_box = {

    placeholder: function () {
        return wps_js.rectangle_placeholder();
    },

    view: function (args = []) {

        // Create Html
        let html = '';

        // // Check Show Button Group
        // if (wps_js.is_active('overview_page')) {
        //     html += wps_js.btn_group_chart('browsers', args);
        //     setTimeout(function () {
        //         wps_js.date_picker();
        //     }, 1000);
        // }

        // Add Chart
        html += '<div class="o-wrap"><div class="c-chart c-chart--limited-height"><canvas id="' + wps_js.chart_id('browsers') + '" height="220"></canvas></div></div>';

        // show Data
        return html;
    },

    meta_box_init: function (args = []) {


        // Prepare Data
        let data = [{
             data: args['browsers_value'],
         }];
        const label_callback = function (tooltipItem, data) {
            return tooltipItem.label;
        }
        const title_callback = (ctx) => {
            return wps_js._('visitors') + ':' + ctx[0].formattedValue
        }

        // Show Chart
        wps_js.horizontal_bar(wps_js.chart_id('browsers'), args['browsers_name'], data[0].data , args['browsers_logos']);


        // Check Table information
        if (wps_js.exist_tag('#' + wps_js.getMetaBoxKey('browsers-table'))) {

            // Reset All Height
            ['browsers-table', 'browsers'].forEach((key) => {
                jQuery("#" + wps_js.getMetaBoxKey(key) + " .inside").removeAttr("style");
            });

            // Show Table information
            let tbl = `<div class="title-center">${args.title}</div>
                    <table width="100%" class="o-table">
                        <tr>
                            <td class="wps-text-muted">${wps_js._('browser')}</td>
                            <td class="wps-text-muted">${wps_js._('visitor_count')}</td>
                            <td class="wps-text-muted">${wps_js._('percentage')}</td>
                        </tr>`;

            for (let i = 0; i < args.browsers_name.length; i++) {
                tbl += `
                 <tr>
                        <td>${args.browsers_name[i]}</td>
                        <td>${(parseInt(args.browsers_value[i]) > 0 ? `${args.info.agent[i] !== "other" ? `<a href="` + args.info.visitor_page + `&agent=` + args.info.agent[i] + `&from=` + args.from + `&to=` + args.to + `" target="_blank">` : ``} ${wps_js.number_format(args.browsers_value[i])} ${(args.info.agent[i] !== "other") ? `</a>` : ``}` : args.browsers_value[i])}</td>
                        <td>${wps_js.number_format((args.browsers_value[i] / args.total) * 100)}%</td>
                 </tr>
                `;
            }

            // Set Total
            tbl += ` <tr><td>${wps_js._('total')}</td><td>${wps_js.number_format(args.total)}</td><td></td></tr>`;
            tbl += `</table>`;
            jQuery("#" + wps_js.getMetaBoxKey('browsers-table') + " .inside").html(tbl);

            // Set Equal Height
            wps_js.set_equal_height('.postBox-table .inside', '.postBox-chart .inside');

            // Add Extra Browser List Version
            let html = '';
            for (let i = 0; i < args.browsers_name.length; i++) {
                if (parseInt(args.browsers_value[i]) > 0 && args.info.agent[i]) {
                    html += `<div class="wps-title-group"><img src="${args.info.logo[i]}" alt="${args.browsers_name[i]}" style="vertical-align: -3px;" class="wps-flag log-tools"> ${args.browsers_name[i]}</div><div class="wp-clearfix"></div>`;
                    html += wps_js.Create_Half_PostBox('postBox-chart-' + args.info.agent[i], 'browser-' + args.info.agent[i] + '-chart');
                    html += wps_js.Create_Half_PostBox('postBox-table-' + args.info.agent[i], 'browser-' + args.info.agent[i] + '-table');
                    html += `<div class="wp-clearfix"></div>`;
                }
            }

            // Set Html in Page
            jQuery(html).insertAfter("#browsers-table");

            // Load function to Get Meta Box
            for (let i = 0; i < args.browsers_name.length; i++) {
                if (parseInt(args.browsers_value[i]) > 0 && args.info.agent[i]) {
                    this.run_custom_browser(args.info.agent[i]);
                }
            }
        }
    },

    run_custom_browser: function (agent) {

        // Show Placeholder
        ['browser-' + agent + '-chart', 'browser-' + agent + '-table'].forEach((key) => {
            jQuery("#" + key + " .inside").css('height', '430px');
        });
        jQuery("#browser-" + agent + "-table .inside").html(wps_js.placeholder());
        jQuery("#browser-" + agent + "-chart .inside").html(wps_js.circle_placeholder());
        jQuery(".wps-ph-picture").attr("style", "height: 310px;");

        //Prepare Params
        let params = {'name': 'browsers', 'browser': agent};
        ['from', 'to'].forEach((key) => {
            if (wps_js.isset(wps_js.global, 'request_params', key)) {
                params[key] = wps_js.global.request_params[key];
            }
        });

        // Send Request
        wps_js.ajaxQ(wps_js.global.meta_box_api, params, 'show_custom_agent', 'error_custom_agent', 'GET', false);
    }
};

/**
 * Show Custom Browser Report
 *
 * @param args
 */
wps_js.show_custom_agent = function (args) {

    // Get Browser Key
    var BrowserKey = args.info.agent[0];

    // Set Canvas Chart
    jQuery('#browser-' + BrowserKey + '-chart .inside').html(`<canvas id="` + wps_js.chart_id('browser-' + BrowserKey) + `" height="220"></canvas>`);

    // After Second Run Chart JS
    setTimeout(function () {

        // Prepare Data
        let data = [{
            data: args['browsers_value'],
         }];
        const label_callback = function (tooltipItem) {
            return tooltipItem.label;
        }
        const title_callback = (ctx) => {
            return wps_js._('visitors') + ':' + ctx[0].formattedValue
        }
        wps_js.horizontal_bar(wps_js.chart_id('browser-' + BrowserKey), args['browsers_name'], data[0].data , args['browsers_logos']);

        // Reset All Height
        ['browser-' + BrowserKey + '-chart', 'browser-' + BrowserKey + '-table'].forEach((key) => {
            jQuery("#" + key + " .inside").removeAttr("style");
        });

        // Show Table information
        let tbl = `<div class="title-center">${args.title}</div>
                    <table width="100%" class="o-table">
                        <tr>
                            <td class="wps-text-muted">${wps_js._('version_list')}</td>
                            <td class="wps-text-muted">${wps_js._('visitor_count')}</td>
                            <td class="wps-text-muted">${wps_js._('percentage')}</td>
                        </tr>`;

        for (let i = 0; i < args.browsers_name.length; i++) {
            tbl += `
                 <tr>
                    <td>${args.browsers_name[i]}</td>
                    <td>${parseInt(args.browsers_value[i]) > 0 ? wps_js.number_format(args.browsers_value[i]) : args.browsers_value[i]}</td>
                    <td>${wps_js.number_format((args.browsers_value[i] / args.total) * 100)}%</td>
                </tr>
                `;
        }

        // Set Total
        tbl += ` <tr><td>${wps_js._('total')}</td><td>${wps_js.number_format(args.total)}</td><td></td></tr>`;
        tbl += `</table>`;
        let tbl_inside = "#browser-" + BrowserKey + "-table .inside";
        jQuery(tbl_inside).html(tbl);

        // Set Equal Height
        wps_js.set_equal_height(tbl_inside, "#browser-" + BrowserKey + "-chart .inside");
    }, 500);
};

wps_js.error_custom_agent = function (data) {
    // Do Stuff
};