Vue.component('tt-graph', {
    template: `
<!--        use chart js with datasets etc everything needed for chart.js here to be usable width and height aswell -->
<tt-card>
  <template v-slot:header>
    <h3 style="text-align: center;user-select: none">{{ header }}</h3>
    </template>

  <div ref="container">
    <canvas ref="chart" :style="{width: width + 'px', height: height + 'px'}"></canvas></div>
</tt-card>
    `,
    props: ['data', 'labels', 'header'],
    data() {
        return {
            chart: null,
            width: 400,
            height: 220
        }
    },
    mounted() {
        const ctx = this.$refs.chart.getContext('2d');
        this.chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: this.labels,
                datasets: this.data
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    },
                    x: {
                        type: 'time',
                        time: {
                            // time is epoch
                            parser: 'X',
                            // unit: 'hour',
                            displayFormats: {
                                minute: 'DD.M. HH:mm',
                            }
                        },
                        // min: '00:00:00',
                        // max: '24:00:00',
                        ticks: {
                            autoSkipPadding: 25,
                            autoSkip: true,
                            maxRotation: 0
                        }
                    }
                },
                responsive: true,
            },
        });

        // set width and height to the canvas element actual width and height
        this.width = this.$refs.container.width;
        this.height = this.$refs.container.height;

    }
})

Vue.component('device-graphing', {
    template: `
        <div style="display: grid; grid-template-columns: 45vw 45vw; gap: 1rem;">
          <h3 style="text-align: center;user-select: none;grid-column: 1 / span 2;">{{ hostname }}</h3>
          
          <tt-loader v-if="graphs.length === 0"></tt-loader>
          
          <template v-for="graph in graphs">
            <tt-graph :data="graph.data" :labels="graph.labels" :header="graph.name"></tt-graph>
            </template>
        </div>
    `,
    data() {
        return {
            graphs: [],
            hostname: ''
        }
    },
    async mounted() {
        // get hostname from url params
        this.hostname = new URLSearchParams(window.location.search).get('hostname');
        console.log(this.hostname);
        // get id from url params
        const id = new URLSearchParams(window.location.search).get('id');
        const response = await axios.get('/Graphing/data?id=' + id);
        const data = response.data;

        const graphs = {};

        for (const item in data) {
            // Create graphs.[item.name.split(':')[0]] if it doesn't exist
            if (!graphs[data[item].name.split(':')[0]]) {
                graphs[data[item].name.split(':')[0]] = {
                    name: data[item].name.split(':')[0],
                    data: [],
                    labels: []
                }
            }

            // Add the data to the graph but check if it's received or sent and already exists

            if (data[item].name.split(':')[1].includes('received') && graphs[data[item].name.split(':')[0]].data.find(data => data.label.includes('received'))) {
                continue;
            }

            if (data[item].name.split(':')[1].includes('sent') && graphs[data[item].name.split(':')[0]].data.find(data => data.label.includes('sent'))) {
                continue;
            }


            graphs[data[item].name.split(':')[0]].data.push({
                label: data[item].name.split(':')[1],
                data: data[item].values.map(value => value.value),
                fill: false,
                borderColor: data[item].name.includes('received') ? 'rgb(75, 192, 192)' : 'rgb(192, 75, 75)',
                tension: 0.1
            });
        }

        // Add the labels to the this.graphs
        for (const graph in graphs) {
            graphs[graph].labels = data[Object.keys(data).find(key => data[key].name.includes(graph))].values.map(value => value.clock);
            this.graphs.push(graphs[graph]);
        }




    }
});