var history = new Vue({
    parent: navbar,
    el: '#history',
    delimiters: ["${", "}"],
    data: {
        blocktimechart: null,
        blocktxchart: null,
        dayChoosen: new Date(),
        startTimestamp: 0,
        currentPage: 1,
        blockData: {},
        netcode: "N3main"
    },
    watch: {
        netcode: function (newVal, oldVal) {
            this.loadHistory(true);
        },
        dayChoosen: function () {
            this.loadHistory(false);
        }
    },
    methods: {
        splitIntoHours(json) {
            this.blockData = {};
            json.forEach(el => {
                index = Math.floor((el.time - startTimestamp) / 3600) + 1;
                if (!this.blockData[index.toString()]) {
                    this.blockData[index.toString()] = [];
                }
                this.blockData[index.toString()].push(el);
            });
            for (i = 1; i <= 24; i++) {
                if (!this.blockData[i.toString()]) {
                    this.blockData[i.toString()] = [];
                }
            }
        },
        loadHistory(net_changed) {
            this.dayChoosen.setSeconds(0);
            this.dayChoosen.setMinutes(0);
            this.dayChoosen.setHours(0);
            startTimestamp = Math.round(this.dayChoosen.getTime() / 1000);
            let end = startTimestamp + (24 * 3600);
            fetch(`/api/${this.netcode}/history?start=${startTimestamp}&end=${end}`)
                .then(resp => {
                    resp.json()
                        .then(json => {
                            this.splitIntoHours(json);
                            this.renderTimeHistoryChart(this.currentPage);
                            this.renderTxHistoryChart(this.currentPage);
                        })
                        .catch(e => {
                            console.log(e);
                            if (net_changed) {
                                this.blockData = [];
                                this.renderTimeHistoryChart(this.currentPage);
                                this.renderTxHistoryChart(this.currentPage);
                            }
                        });
                })
                .catch(e => {
                    console.log(e);
                    console.log(e)
                    if (net_changed) {
                        this.blockData = [];
                        this.renderTimeHistoryChart(this.currentPage);
                        this.renderTxHistoryChart(this.currentPage);
                    }
                });
        },
        onPageChanged(page) {
            this.renderTimeHistoryChart(page);
            this.renderTxHistoryChart(page);
        },
        renderTxHistoryChart(page) {
            let json = this.blockData[page.toString()];
            let labels = json.map(d => d.height)
            let data = json.map(d => d.tx)

            if (this.blocktxchart != null) {
                this.blocktxchart.data.labels = labels;
                this.blocktxchart.data.datasets[0].data = data;
                this.blocktxchart.update();
                return;
            }
            let ctx = document.getElementById('TxHistoryChart').getContext('2d');
            this.blocktxchart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'tx',
                        data: data,
                        backgroundColor: 'rgba(0, 255, 0, 1)',
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        },
        renderTimeHistoryChart(page) {
            let json = this.blockData[page.toString()];
            let labels = json.map(d => d.height)
            let data = json.map(d => d.interval)

            if (this.blocktimechart != null) {
                this.blocktimechart.data.labels = labels;
                this.blocktimechart.data.datasets[0].data = data;
                this.blocktimechart.update();
                return;
            }
            let ctx = document.getElementById('TimeHistoryChart').getContext('2d');
            this.blocktimechart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'blocktime',
                        data: data,
                        backgroundColor: function (ctx) {
                            var index = ctx.dataIndex;
                            var value = ctx.dataset.data[index];
                            return 30 < value ? 'red' : 'rgba(0, 255, 0, 1)';
                        },
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        },
    },
    mounted: function () {
        this.loadHistory(false);
    },
})