google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // Fetch data from the API
    function fetchDataAndDrawChart() {
        var deviceId = localStorage.getItem('deviceId');
        if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi'){
            fetch('/read_tx_bytes')
                .then(response => response.json())
                .then(data => {
                    // Create the data table
                    var dataTable = new google.visualization.DataTable();
                    dataTable.addColumn('string', 'Density');
                    dataTable.addColumn('number', 'Element');
                    dataTable.addColumn({ type: 'string', role: 'style' });

                    // Add the fixed density values and data from the API
                    dataTable.addRows([
                        ["1", parseInt(data.tx_bytes_data[0]), "#1E51C7"],
                        ["2", parseInt(data.tx_bytes_data[1]), "#1E51C7"],
                        ["3", parseInt(data.tx_bytes_data[2]), "#1E51C7"],
                        ["4", parseInt(data.tx_bytes_data[3]), "#1E51C7"],
                        ["5", parseInt(data.tx_bytes_data[4]), "#1E51C7"],
                        ["6", parseInt(data.tx_bytes_data[5]), "#1E51C7"],
                        ["7", parseInt(data.tx_bytes_data[6]), "#1E51C7"],
                        ["8", parseInt(data.tx_bytes_data[7]), "#1E51C7"]
                    ]);

                    var view = new google.visualization.DataView(dataTable);
                    view.setColumns([0, 1, 2]);

                    var options = {
                        title: "TX_BYTES - Transmitted Bytes",
                        bar: { groupWidth: "95%" },
                        legend: { position: "none" },
                        backgroundColor: '#0c212b',
                        tooltip: { trigger: 'none' }
                    };

                    var chart = new google.visualization.ColumnChart(document.getElementById("TransmittedChart"));
                    chart.draw(view, options);
                })
            } else { 
                var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'Density');
            dataTable.addColumn('number', 'Element');
            dataTable.addColumn({ type: 'string', role: 'style' });

            dataTable.addRows([
                ["1", 0, "#1E51C7"],
                ["2", 0, "#1E51C7"],
                ["3", 0, "#1E51C7"],
                ["4", 0, "#1E51C7"],
                ["5", 0, "#1E51C7"],
                ["6", 0, "#1E51C7"],
                ["7", 0, "#1E51C7"],
                ["8", 0, "#1E51C7"]
            ]);

            var view = new google.visualization.DataView(dataTable);
            view.setColumns([0, 1, 2]);

            var options = {
                title: "TX_BYTES - Transmitted Bytes",
                bar: { groupWidth: "95%" },
                legend: { position: "none" },
                backgroundColor: '#0c212b',
                tooltip: { trigger: 'none' }
            };

            var chart = new google.visualization.ColumnChart(document.getElementById("TransmittedChart"));
            chart.draw(view, options);
        }
    }

    fetchDataAndDrawChart();

    // Update chart every 5 seconds
    setInterval(fetchDataAndDrawChart, 10000);
    $(document).on('click', function() {
        fetchDataAndDrawChart();
    });
}