@props(['idSuffix' => ''])

<div class="w-full min-h-80">
    <canvas id="lineChart{{ $idSuffix }}"></canvas>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('lineChart{{ $idSuffix }}').getContext('2d');

        function generateMockData() {
            return {
                success: true,
                message: {
                    rx_values: Array.from({ length: 10 }, () => Math.floor(Math.random() * 100)),
                    tx_values: Array.from({ length: 40 }, () => Math.floor(Math.random() * 100)),
                    rx_timestamp: Array.from({ length: 10 }, (_, i) => `02:${10 + i}:22`),
                    tx_timestamp: Array.from({ length: 40 }, (_, i) => `02:${10 + i}:22`)
                }
            };
        }

        const chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                    {
                        label: 'RX',
                        data: [],
                        borderColor: '#00ABB8',
                        backgroundColor: 'rgba(0, 171, 184, 0.1)',
                        tension: 0.4,
                        pointRadius: 5,
                        pointBackgroundColor: '#00ABB8'
                    },
                    {
                        label: 'TX',
                        data: [],
                        borderColor: '#FF675C',
                        backgroundColor: 'rgba(255, 103, 92, 0.1)',
                        tension: 0.4,
                        pointRadius: 5,
                        pointBackgroundColor: '#FF675C'
                    }
                ]
            },
            options: {
                responsive: true,
            }
        });

        function fetchData() {
            try {
                const result = generateMockData();

                if (result.success) {
                    chart.data.datasets[0].data = result.message.rx_values;
                    chart.data.datasets[1].data = result.message.tx_values;

                    chart.data.labels = result.message.rx_timestamp.concat(result.message.tx_timestamp);

                    chart.update();
                }
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        fetchData();
        setInterval(fetchData, 10000);
    });
</script>