import {logerror} from "./logit.js";
import * as utils from "./chart_utilities.js";
import { DateTime } from './luxon.min.js'
import * as map from "./map.js";

// table to distribute the different charts
export const tabtable = [
    {id: 'kartentab', type: 'map', container: 'map', func: map.showMap, div: null, dformat: null},
    {id: 'livetab', type: 'live', container: 'dlive', func: showChart, div: 2, dformat: "dd.LL - HH:mm:ss"},
    {id: 'houravgtab', type: 'havg', container: 'dhour', func: showChart, div: 1, dformat: "dd.LL - HH'h'"},
    {id: 'dayavgtab', type: 'davg', container: 'dday', func: showChart, div: 1, dformat: "dd.LL"},
    {id: 'daynighttab', type: 'daynight', container: 'ddaynight', func: showChart, div: 1, dformat: "dd.LL"},
    {id: 'ldentab', type: 'lden', container: 'dlden', func: showChart, div: 1, dformat: "dd.LL"},
]


export async function showChart(params, typ, container) {
    function form() {
        for(let item of tabtable) {
            if (item.type === typ) {
                const d = DateTime.fromMillis(this.x, {zone: 'utc'})
                const d1 = d.plus({days: 1})
                let fmt = d.toFormat(item.dformat)
                if(((typ === 'daynight') && (this.series.name.startsWith('N'))) || (typ === 'lden')) {
                    fmt = `${d.toFormat('dd')}/${d1.toFormat('dd.LL')}`
                }
                if(this.series.name === 'Peaks') {
                    item.div = 0
                }
                return '<div style="border: 2px solid ' + this.point.color + '; padding: 3px;">' +
                    fmt + '<br />' +
                    '<span style="color: ' + this.point.color + '">&#9679;&nbsp;</span>' +
                    this.series.name + ':&nbsp; <b>' +
                    Highcharts.numberFormat(this.y,item.div) +
                    '</b></div>'
            }
        }
    }

    function xformat() {
        if(typ === 'lden') {
        let lbl = this.axis.defaultLabelFormatter.call(this);
        this.value += 86400000;
        let lbl1 = this.axis.defaultLabelFormatter.call(this);
        return parseInt(lbl) + '/' + lbl1;
    } else if ((typ === 'live') || (typ === 'havg')) {
        let v = this.axis.defaultLabelFormatter.call(this);
        if (v.indexOf(':') == -1) {
            return '<span style="font-weight:bold;color:red">' + v + '<span>';
        } else {
            return v;
        }
    } else {
            return this.axis.defaultLabelFormatter.call(this);
        }
    }

    const url = `/chart/getsensordata?sensorid=${params.sid}&data=${typ}`
    let ret = await fetch(url)
        .catch(e => {
            logerror(e)
        });
    let erg = await ret.json()
    erg.options.xAxis.labels.formatter = xformat
    erg.options.tooltip.formatter = form
    let chart = Highcharts.chart(container, erg.options, function (chart) {
        utils.addSensorID2chart(chart, {
            sid: erg.params.sensorid,
            indoor: erg.params.indoor
        }, document.getElementById(container).offsetWidth)
    })

    if((typ === 'havg') || (typ === 'davg')) {
        erg.options2.tooltip.formatter = form
        erg.options2.xAxis.labels.formatter = xformat
        let ch1 = Highcharts.chart(typ === 'havg' ? 'dpeak1' : 'dpeak2', erg.options2)
        }
}

export const loadAll = async (params) => {
    console.log('now load all in Background')
    for (let i = 2; i < tabtable.length; i++) {
        await showChart(params, tabtable[i].type, tabtable[i].container)
    }
}