let benignCount = [100, 100, 50, 40];
let maliciuosCount = [0, 0, 50, 60];
let benignValue = 100;
let maliciuosValue = 0;

const spans = document.querySelectorAll('.tabNetworkData span');
const displayDurations = [2000, 1000, 2000, 3000];
function cycleSpans() {
    spans.forEach(span => span.style.display = 'none');
    let currentIndex = 0;
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart)
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Maliciuos', maliciuosValue],
            ['Benign', benignValue],
        ]);
        var options = {
            title: 'The percentage of Benign and Maliciuos Request in dataset',
            backgroundColor: '#0c212b',
            tooltip: { trigger: 'none' },
            colors: ['#546DA8', '#54A3A8']
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }
    function showNextSpan() {
        spans.forEach(span => span.style.display = 'none');
        spans[currentIndex].style.display = 'inline';
        setTimeout(() => {
            currentIndex = (currentIndex + 1) % spans.length;
            benignValue = benignCount[currentIndex];
            maliciuosValue = maliciuosCount[currentIndex];
            if (currentIndex == 2 || currentIndex == 3) {
                document.getElementById("firstTab").style.borderColor = '#FF5339';
                document.getElementsByClassName("attackMode")[0].style.display = 'block';
            } else {
                document.getElementById("firstTab").style.borderColor = 'transparent'
                document.getElementsByClassName("attackMode")[0].style.display = 'none';
            }
            drawChart();
            showNextSpan();
        }, displayDurations[currentIndex]);
    }
    showNextSpan();
}
document.addEventListener('DOMContentLoaded', () => {
    cycleSpans();
});