( function ( $, root, undefined ) {
    root.rediscache = root.rediscache || {};
    var rediscache = root.rediscache;

    $.extend( rediscache, {
        metrics: {
            computed: null,
        },
        chart: null,
        chart_defaults: {
            noData: {
                text: root.rediscache_metrics
                    ? rediscache.l10n.no_data
                    : rediscache.l10n.no_cache,
                align: 'center',
                verticalAlign: 'middle',
                offsetY: -25,
                style: {
                    color: '#72777c',
                    fontSize: '14px',
                    fontFamily: 'inherit',
                }
            },
            stroke: {
                width: [2, 2],
                curve: 'smooth',
                dashArray: [0, 8],
            },
            colors: [
                '#0096dd',
                '#72777c',
            ],
            annotations: {
                texts: [{
                    x: '15%',
                    y: '30%',
                    fontSize: '20px',
                    fontWeight: 600,
                    fontFamily: 'inherit',
                    foreColor: '#72777c',
                }],
            },
            chart: {
                type: 'line',
                height: $( '#metrics-pane #widget-redis-stats' ).length ? '300px' : '100%',
                toolbar: { show: false },
                zoom: { enabled: false },
                animations: { enabled: false },
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            fill: {
                opacity: [0.25, 1],
            },
            xaxis: {
                type: 'datetime',
                labels: {
                    format: 'HH:mm',
                    datetimeUTC: false,
                    style: { colors: '#72777c', fontSize: '13px', fontFamily: 'inherit' },
                },
                tooltip: { enabled: false },
            },
            yaxis: {
                type: 'numeric',
                tickAmount: 4,
                min: 0,
                labels: {
                    style: { colors: '#72777c', fontSize: '13px', fontFamily: 'inherit' },
                    formatter: function ( value ) {
                        return Math.round( value );
                    },
                },
            },
            tooltip: {
                fixed: {
                    enabled: true,
                    position: 'bottomLeft',
                    offsetY: 15,
                    offsetX: 0,
                },
            }
        },
        templates: {
            tooltip_title: _.template(
                '<div class="apexcharts-tooltip-title"><%- title %></div>'
            ),
            series_group: _.template(
                '<div class="apexcharts-tooltip-series-group">' +
                '  <span class="apexcharts-tooltip-marker" style="background-color: <%- color %>;"></span>' +
                '  <div class="apexcharts-tooltip-text">' +
                '    <div class="apexcharts-tooltip-y-group">' +
                '      <span class="apexcharts-tooltip-text-label"><%- name %>:</span>' +
                '      <span class="apexcharts-tooltip-text-value"><%- value %></span>' +
                '    </div>' +
                '  </div>' +
                '</div>'
            ),
            series_pro: _.template(
                '<div class="apexcharts-tooltip-series-group">' +
                '  <span class="apexcharts-tooltip-marker" style="background-color: <%- color %>;"></span>' +
                '  <div class="apexcharts-tooltip-text">' +
                '    <div class="apexcharts-tooltip-y-group">' +
                '      <span class="apexcharts-tooltip-text-label"><%- name %></span>' +
                '    </div>' +
                '  </div>' +
                '</div>'
            ),
        }
    } );

    // Build the charts by deep extending the chart defaults
    $.extend( rediscache, {
        charts: {
            time: $.extend( true, {}, rediscache.chart_defaults, {
                yaxis: {
                    labels: {
                        formatter: function ( value ) {
                            return Math.round( value ) + ' ms';
                        },
                    },
                },
                tooltip: {
                    custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                        return [
                            rediscache.templates.tooltip_title({
                                title: new Date( w.globals.seriesX[ seriesIndex ][ dataPointIndex ] )
                                    .toTimeString().slice( 0, 5 ),
                            }),
                            rediscache.templates.series_group({
                                color: rediscache.chart_defaults.colors[0],
                                name: w.globals.seriesNames[0],
                                value: series[0][ dataPointIndex ].toFixed(2) + ' ms',
                            }),
                            rediscache.templates.series_pro({
                                color: rediscache.chart_defaults.colors[1],
                                name: rediscache.l10n.pro,
                            }),
                        ].join('');
                    },
                },
            } ),
            bytes: $.extend( true, {}, rediscache.chart_defaults, {
                yaxis: {
                    labels: {
                        formatter: function ( value ) {
                            var i = value === 0 ? 0 : Math.floor( Math.log( value ) / Math.log( 1024 ) );

                            return parseFloat( (value / Math.pow( 1024, i ) ).toFixed( i ? 2 : 0 ) ) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i];
                        },
                    },
                },
                tooltip: {
                    custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                        var value = series[0][ dataPointIndex ];
                        var i = value === 0 ? 0 : Math.floor( Math.log( value ) / Math.log( 1024 ) );
                        var bytes = parseFloat( (value / Math.pow( 1024, i ) ).toFixed( i ? 2 : 0 ) ) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i];

                        return [
                            rediscache.templates.tooltip_title({
                                title: new Date( w.globals.seriesX[ seriesIndex ][ dataPointIndex ] ).toTimeString().slice( 0, 5 ),
                            }),
                            rediscache.templates.series_group({
                                color: rediscache.chart_defaults.colors[0],
                                name: w.globals.seriesNames[0],
                                value: bytes,
                            }),
                            rediscache.templates.series_pro({
                                color: rediscache.chart_defaults.colors[1],
                                name: rediscache.l10n.pro,
                            }),
                        ].join('');
                    },
                },
            } ),
            ratio: $.extend( true, {}, rediscache.chart_defaults, {
                yaxis: {
                    max: 100,
                    labels: {
                        formatter: function ( value ) {
                            return Math.round( value ) + '%';
                        },
                    },
                },
                tooltip: {
                    custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                        return [
                            rediscache.templates.tooltip_title({
                                title: new Date( w.globals.seriesX[ seriesIndex ][ dataPointIndex ] )
                                    .toTimeString().slice( 0, 5 ),
                            }),
                            rediscache.templates.series_group({
                                color: rediscache.chart_defaults.colors[0],
                                name: w.globals.seriesNames[0],
                                value: Math.round( series[0][ dataPointIndex ] * 100 ) / 100 + '%',
                            }),
                        ].join('');
                    },
                },
            } ),
            calls: $.extend( true, {}, rediscache.chart_defaults, {
                tooltip: {
                    custom: function ({ series, seriesIndex, dataPointIndex, w }) {
                        return [
                            rediscache.templates.tooltip_title({
                                title: new Date( w.globals.seriesX[ seriesIndex ][ dataPointIndex ] )
                                    .toTimeString().slice( 0, 5 ),
                            }),
                            rediscache.templates.series_group({
                                color: rediscache.chart_defaults.colors[0],
                                name: w.globals.seriesNames[0],
                                value: Math.round( series[0][ dataPointIndex ] ),
                            }),
                            rediscache.templates.series_pro({
                                color: rediscache.chart_defaults.colors[1],
                                name: rediscache.l10n.pro,
                            }),
                        ].join('');
                    },
                },
            } ),
        },
    } );

    var compute_metrics = function ( raw_metrics ) {
        var metrics = {};

        // parse raw metrics in blocks of minutes
        for ( var entry in raw_metrics ) {
            var values = {};
            var timestamp = raw_metrics[ entry ].timestamp;
            var minute = ( timestamp - timestamp % 60 ) * 1000;

            for ( var key in raw_metrics[ entry ] ) {
                if ( raw_metrics[ entry ].hasOwnProperty( key ) ) {
                    values[ key ] = Number( raw_metrics[ entry ][ key ] );
                }
            }

            if ( ! metrics[ minute ] ) {
                metrics[ minute ] = [];
            }

            metrics[ minute ].push( values );
        }

        // calculate median value for each block
        for ( var entry in metrics ) {
            if ( metrics[ entry ].length === 1 ) {
                metrics[ entry ] = metrics[ entry ].shift();
                continue;
            }

            var medians = {};

            for ( var key in metrics[ entry ][0] ) {
                medians[ key ] = compute_median(
                    metrics[ entry ].map(
                        function ( metric ) {
                            return metric[ key ];
                        }
                    )
                );
            }

            metrics[ entry ] = medians;
        }

        var computed = [];

        for ( var timestamp in metrics ) {
            var entry = metrics[ timestamp ];

            entry.date = Number( timestamp );
            entry.time = entry.time * 1000;

            computed.push( entry );
        }

        computed.sort(
            function( a, b ) {
                return a.date - b.date;
            }
        );

        return computed.length < 2 ? [] : computed;
    };

    var compute_median = function ( numbers ) {
        var median = 0;
        var numsLen = numbers.length;

        numbers.sort();

        if ( numsLen % 2 === 0 ) {
            median = ( numbers[ numsLen / 2 - 1 ] + numbers[ numsLen / 2 ] ) / 2;
        } else {
            median = numbers[ ( numsLen - 1 ) / 2 ];
        }

        return median;
    };

    var render_chart = function ( id ) {
        if ( rediscache.chart ) {
            rediscache.chart.updateOptions( rediscache.charts[ id ] );
            return;
        }

        var chart = new ApexCharts(
            document.querySelector( '#redis-stats-chart' ),
            rediscache.charts[ id ]
        );

        chart.render();
        root.rediscache.chart = chart;
    };

    var setup_charts = function () {
        var metrics = {};

        for ( var type in rediscache.charts ) {
            if ( ! rediscache.charts.hasOwnProperty( type ) ) {
                continue;
            }

            metrics[type] = rediscache.metrics.computed.map(
                function ( entry ) {
                    return [ entry.date, entry[type] ];
                }
            );

            rediscache.charts[type].series = [{
                name: rediscache.l10n[type],
                type: 'area',
                data: metrics[type],
            }];
        }

        if ( ! rediscache.disable_pro ) {
            var pro_charts = {
                time: function ( entry ) {
                    return [ entry[0], entry[1] * 0.5 ]
                },
                bytes: function ( entry ) {
                    return [ entry[0], entry[1] * 0.3 ]
                },
                calls: function ( entry ) {
                    return [ entry[0], Math.round( entry[1] / 50 ) + 5 ]
                },
            };

            for ( var type in pro_charts ) {
                if ( ! rediscache.charts[type] ) {
                    continue;
                }

                rediscache.charts[type].series.push({
                    name: rediscache.l10n.pro,
                    type: 'line',
                    data: metrics[type].map( pro_charts[type] ),
                });
            }

        }
    };

    // executed on page load
    $(function () {
        var $tabs = $( '#rediscache .nav-tab-wrapper' );
        var $panes = $( '#rediscache .content-column .tab-content' );

        $tabs.find( 'a' ).on(
            'click.redis-cache',
            function ( event ) {
                var toggle = $( this ).data( 'toggle' );

                $( this ).blur();

                show_tab( toggle );

                if ( history.pushState ) {
                    history.pushState( null, null, '#' + toggle );
                }

                return false;
            }
        );

        var firstRender = window.location.hash.indexOf('metrics') === -1;

        var show_tab = function ( name ) {
            $tabs.find( '.nav-tab-active' ).removeClass( 'nav-tab-active' );
            $panes.find( '.tab-pane.active' ).removeClass( 'active' );

            $( '#' + name + '-tab' ).addClass( 'nav-tab-active' );
            $( '#' + name + '-pane' ).addClass( 'active' );

            if (name === 'metrics' && firstRender) {
                firstRender = false;
                render_chart( 'time' );
            }
        };

        var show_current_tab = function () {
            var tabHash = window.location.hash.replace( '#', '' );

            if ( tabHash !== '' && $( '#' + tabHash + '-tab' ) ) {
                show_tab( tabHash );
            }
        };

        show_current_tab();

        $( window ).on( 'hashchange', show_current_tab );

        if ( $( '#widget-redis-stats' ).length ) {
            rediscache.metrics.computed = compute_metrics( root.rediscache_metrics );

            setup_charts();
            render_chart( 'time' );
        }

        $( '#widget-redis-stats ul a[data-chart]' ).on(
            'click.redis-cache',
            function ( event ) {
                event.preventDefault();

                $( '#widget-redis-stats .active' ).removeClass( 'active' );
                $( this ).blur().addClass( 'active' );

                render_chart(
                    $( event.target ).data( 'chart' )
                );
            }
        );

        $( '.notice.is-dismissible[data-dismissible]' ).on(
            'click.roc-dismiss-notice',
            '.notice-dismiss',
            function ( event ) {
                event.preventDefault();

                var $parent = $( this ).parent();

                $.post( ajaxurl, {
                    notice: $parent.data( 'dismissible' ),
                    action: 'roc_dismiss_notice',
                    _ajax_nonce: $parent.data( 'nonce' ),
                } );
            }
        );

        if ( $( '#redis-cache-copy-button' ).length ) {
            if ( typeof ClipboardJS === 'undefined' ) {
                $( '#redis-cache-copy-button' ).remove();
            } else {
                var successTimeout;
                var clipboard = new ClipboardJS( '#redis-cache-copy-button .copy-button' );

                clipboard.on( 'success', function( e ) {
                    var triggerElement = $( e.trigger ),
                        successElement = $( '.success', triggerElement.closest( 'div' ) );

                    e.clearSelection();
                    triggerElement.trigger( 'focus' );

                    clearTimeout( successTimeout );
                    successElement.removeClass( 'hidden' );

                    successTimeout = setTimeout( function() {
                        successElement.addClass( 'hidden' );

                        if ( clipboard.clipboardAction.fakeElem && clipboard.clipboardAction.removeFake ) {
                            clipboard.clipboardAction.removeFake();
                        }
                    }, 3000 );

                } );
            }
        }
    });

} ( window[ rediscache.jQuery ], window ) );