/* ------------------------------------------------------------------------------
 *
 *  # Custom JS code
 *
 *  Place here all your custom js. Make sure it's loaded after app.js
 *
 * ---------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------
 *
 *  # Dashboard configuration
 *
 *  Demo dashboard configuration. Contains charts and plugin initializations
 *
 * ---------------------------------------------------------------------------- */

moment.locale('fr')

// Setup module
// ------------------------------

var Dashboard = function () {
    // Rounded progress charts
    var _RoundedProgressChart = function (element, radius, border, color, end, iconClass, textTitle, textAverage) {
        if (typeof d3 == 'undefined') {
            console.warn('Warning - d3.min.js is not loaded.');
            return;
        }

// Initialize chart only if element exsists in the DOM
        if ($(element).length > 0) {

// Basic setup
            // ------------------------------

// Main variables
            var d3Container = d3.select(element),
                startPercent = 0,
                iconSize = 32,
                endPercent = end,
                twoPi = Math.PI * 2,
                formatPercent = d3.format('.0%'),
                boxSize = radius * 2;

// Values count
            var count = Math.abs((endPercent - startPercent) / 0.01);

// Values step
            var step = endPercent < startPercent ? -0.01 : 0.01;

// Create chart
            // ------------------------------

// Add SVG element
            var container = d3Container.append('svg');

// Add SVG group
            var svg = container
                .attr('width', boxSize)
                .attr('height', boxSize)
                .append('g')
                .attr('transform', 'translate(' + (boxSize / 2) + ',' + (boxSize / 2) + ')');

// Construct chart layout
            // ------------------------------

// Arc
            var arc = d3.svg.arc()
                .startAngle(0)
                .innerRadius(radius)
                .outerRadius(radius - border);

//
            // Append chart elements
            //

// Paths
            // ------------------------------

// Background path
            svg.append('path')
                .attr('class', 'd3-progress-background')
                .attr('d', arc.endAngle(twoPi))
                .style('fill', '#eee');

// Foreground path
            var foreground = svg.append('path')
                .attr('class', 'd3-progress-foreground')
                .attr('filter', 'url(#blur)')
                .style('fill', color)
                .style('stroke', color);

// Front path
            var front = svg.append('path')
                .attr('class', 'd3-progress-front')
                .style('fill', color)
                .style('fill-opacity', 1);

// Text
            // ------------------------------

// Percentage text value
            var numberText = d3.select(element)
                .append('h2')
                .attr('class', 'pt-1 mt-2 mb-1')

// Icon
            d3.select(element)
                .append('i')
                .attr('class', iconClass + ' counter-icon')
                .attr('style', 'top: ' + ((boxSize - iconSize) / 2) + 'px');

// Title
            d3.select(element)
                .append('div')
                .html('<a href="#card-' + textTitle +'">' + textTitle +'</a>');

// Subtitle
            d3.select(element)
                .append('div')
                .attr('class', 'font-size-sm text-muted mb-3')
                .html(textAverage);

// Animation
            // ------------------------------

// Animate path
            function updateProgress(progress) {
                foreground.attr('d', arc.endAngle(twoPi * progress));
                front.attr('d', arc.endAngle(twoPi * progress));
                numberText.text(formatPercent(progress));
            }

// Animate text
            var progress = startPercent;
            (function loops() {
                updateProgress(progress);
                if (count > 0) {
                    count--;
                    progress += step;
                    setTimeout(loops, 10);
                }
            })();
        }
    };
    var GetSortOrder = function (prop) {
        return function (a, b) {
            if (a[prop] > b[prop]) {
                return -1;
            } else if (a[prop] < b[prop]) {
                return 1;
            }
            return 0;
        }
    }    
    var _fetch_docker = function (datas,item_id){
        var table = document.querySelector("#table_" + item_id).getElementsByTagName('tbody')[0];
        //table.innerHTML = null;
        if (datas) {
            datas.sort(GetSortOrder("status"));
            var title = table.insertRow()
            title.classList.add("table-active");
            title.classList.add("table-border-double");
            var tc0 = title.insertCell(0)
            var tc1 = title.insertCell(1)
            tc0.setAttribute('colspan', 5)
            tc0.innerHTML = "Docker"
            tc1.classList.add("text-right")
            tc1.innerHTML = '<span class="progress-meter" id="today-progress" data-progress="30"></span>'
            datas.forEach(function (docker_id) {
                var row = table.insertRow()
                row.setAttribute('role','row')
                var c0 = row.insertCell(0)
                var c1 = row.insertCell(1)
                var c2 = row.insertCell(2)
                var c3 = row.insertCell(3)
                var c4 = row.insertCell(4)
                var c5 = row.insertCell(5)
    
                var txt_muted = ''
                var btn_play = ''
                var btn_stop = ''
                var btn_restart = ''
                if (docker_id.status == 'running'){
                    var date_start = date = new Date(docker_id.start)
                    var mm = 'En ligne depuis '+moment(date_start).fromNow(true)
                    var bg = 'bg-success'
                    btn_stop = '<a href="#" class="dropdown-item"><i class="icon icon-stop2"></i> Arrêter</a>'
                    btn_restart = '<a href="/container/restart/'+ docker_id.name + '/' + item_id + '" class="dropdown-item"><i class="icon icon-spinner11"></i> Redemarrer</a>'
                }else{
                    var date_stop = date = new Date(docker_id.stop)
                    var bg = 'bg-grey'
                    var state = 'Arrêté '
                    if (docker_id.exitcode != ""){
                        bg = 'bg-danger'
                        state = 'Detruite '
                    }
                    var mm = state+moment(date_stop).fromNow()
                    txt_muted = 'text-muted'
                    btn_play = '<a href="#" class="dropdown-item"><i class="icon icon-play3"></i> Demarrer</a>'
                }
                var addons_dir = ''
                var docker_img = docker_id.image
                var tag = docker_img.split(':')[1]
                docker_img = docker_img.split(':')[0];
                tag = tag ? ' ('+tag+')' : ''
                if (docker_img.indexOf('/') > -1){
                    docker_img = docker_img.split('/')[1]
                }
    
                c2.classList.add('sorting_1')
                if (docker_img == 'odoo'){
                    addons_dir = '<div class="dropdown-divider"></div><a href="#" class="dropdown-item"><i class="icon icon-folder"></i> Custom addons</a>'
                }
    
                c0.innerHTML = '<div class="d-flex align-items-center"><div class="mr-3"><a href="#"><img src="docker/logos/'+ docker_img +'.png" class="rounded-circle" width="32" height="32" alt=""></a></div><div><a href="#" class="text-default font-weight-semibold">' + docker_id.name + '</a><div class="'+txt_muted+' font-size-sm"><span class="badge badge-mark ' + bg +' mr-1"></span>'+mm+'</div></div></div>'
                c1.innerHTML = '<span class="text-muted">' + docker_id.ip + '</span></td>';
                c2.innerHTML = docker_img + tag;
                c3.innerHTML = '<span> Test </span>'
                c4.innerHTML = '<span class="badge ' + bg +'">' + docker_id.status + '</span>';
                c5.innerHTML = '<div class="list-icons"><div class="list-icons"><div class="list-icons-item dropdown"><a href="#" class="list-icons-item dropdown-toggle caret-0" data-toggle="dropdown"><i class="icon-menu7"></i></a><div class="dropdown-menu dropdown-menu-right">'+ btn_play + btn_restart + btn_stop + addons_dir + '<div class="dropdown-divider"></div><a href="#" class="dropdown-item"><i class="icon-gear"></i> Settings</a></div></div></div></div>';
                //console.log(docker_id.name, item.id);
            });
        }
    };

return {
        initCharts: function () {

// Progress charts
            fetch("./docker/test.json", { cache: "no-cache" })
                .then(async(response) => response.json())
                .then(function(json){
                    var icolor = 'text-pink-400'
                    var vcolor = '#F06292'
                    json.forEach(function(item){
                        switch (true) {
                            case parseInt(item.disk.rate) < 30:
                                icolor = 'text-green-400'
                                vcolor = '#1ce9a3'
                                break;
                            case parseInt(item.disk.rate) > 30 && parseInt(item.disk.rate) < 70:
                                icolor = 'text-orange-400'
                                vcolor = '#ebac33'
                                break;
                        
                            default:
                                icolor = 'text-danger-400'
                                vcolor = '#e93c1c'
                                break;
                        }
                        fetch(item.info_url, { cache: "no-cache" })
                            .then(async (response) => response.json())
                            .then(function (json_data) {
                                if (json_data.docker) {
                                    _fetch_docker(json_data.docker, item.id);
                                }
                            })
                            .catch(error => {
                                console.log('There was an error!', error);
                            });
                        _RoundedProgressChart('#' + item.id, 38, 2, vcolor, parseInt(item.disk.rate)/100, 'icon-display '+ icolor, item.name, item.url + '</br>' + item.ip);
                    });
                })
                .catch(error => {
                    console.error('There was an error!', error);
                });
        },
        updateTable: function (datas, item) {
            _fetch_docker(datas, item);
        }
    }
}();

var DatatableBasic = function () {

//
    // Setup module components
    //

// Basic Datatable examples
    var _componentDatatableBasic = function () {
        if (!$().DataTable) {
            console.warn('Warning - datatables.min.js is not loaded.');
            return;
        }
        // Setting datatable defaults
        $.extend($.fn.dataTable.defaults, {
            autoWidth: false,
            columnDefs: [{
                orderable: false,
                width: 100,
                targets: [5]
            }],
            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
            language: {
                search: '<span>Filter:</span> _INPUT_',
                searchPlaceholder: 'Type to filter...',
                lengthMenu: '<span>Show:</span> _MENU_',
                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '←' : '→', 'previous': $('html').attr('dir') == 'rtl' ? '→' : '←' }
            }
        });

// Basic datatable
        $('.datatable-basic').DataTable();

// Alternative pagination
        $('.datatable-pagination').DataTable({
            pagingType: "simple",
            language: {
                paginate: { 'next': $('html').attr('dir') == 'rtl' ? 'Next ←' : 'Next →', 'previous': $('html').attr('dir') == 'rtl' ? '→ Prev' : '← Prev' }
            }
        });

// Datatable with saving state
        $('.datatable-save-state').DataTable({
            stateSave: true
        });

// Scrollable datatable
        var table = $('.datatable-scroll-y').DataTable({
            autoWidth: true,
            scrollY: 300
        });

// Resize scrollable table when sidebar width changes
        $('.sidebar-control').on('click', function () {
            table.columns.adjust().draw();
        });
    };

// Select2 for length menu styling
    var _componentSelect2 = function () {
        if (!$().select2) {
            console.warn('Warning - select2.min.js is not loaded.');
            return;
        }

// Initialize
        $('.dataTables_length select').select2({
            minimumResultsForSearch: Infinity,
            dropdownAutoWidth: true,
            width: 'auto'
        });
    };

//
    // Return objects assigned to module
    //

return {
        init: function () {
            _componentDatatableBasic();
            _componentSelect2();
        }
    }
}();

//Recherche information
var Serverinformation = function() {
    var _getNetwork = function(){
        fetch("./docker/test.json", { cache: "no-cache" })
            .then(async (response) => response.json())
            .then(function (json) {
                json.forEach(function (item) {
                    //j'ajoute le dom table dans l'objet
                    fetch(item.info_url, { cache: "no-cache" })
                        .then((response) => response.json())
                        .then(function (json_data) {
                            var table = document.getElementById('table_' + item.id);
                            var row = table.getElementsByTagName('tbody')[0];
                            if (row){
                                row.parentNode.removeChild(row);
                            }
                            table.appendChild(document.createElement('tbody'));
                            Dashboard.updateTable(json_data.docker, item.id);
                            document.querySelector('#' + item.id + '-net_active').textContent = json_data.network.active;
                        });
                });
            })
            .catch(error => {
                console.log('There was an error!', error);
            });
        
    }
    var interval = null;

var start = function(){
        //console.log('play');
        interval = setInterval(_getNetwork, 50000);
    }

var stop = function(){
        if(interval){
            //console.log('pause');
            clearInterval(interval);
        }
    }

return {
        initInfo: function(){
            _getNetwork();
        },
        play: function () {
            start();
        },
        pause: function (){
            stop();
        }
    }
}();
// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function () {
    Dashboard.initCharts();
    DatatableBasic.init();
    Serverinformation.initInfo();
    Serverinformation.play();
});

document.addEventListener("visibilitychange", function() {
    if (document.hidden){
        Serverinformation.pause();
    } else {
        Serverinformation.play();
    }
});

//ReactDom.render(<Sys />, document.querySelector('#test'))