// Show the live data chart
import {logit, logerror} from './logit.js'
import * as utils from './chart_utilities.js'

// ******************************************************************
// PlotDayLive_Noise
// ******************************************************************

let noise_ymin = 30;                    // lowest value on y-axis for noise
let noise_ymax = 120;                   // highest value on y-axis for noise
let activeTab = 0;                      // active TAB number
let peaklim = 70;                       // threshold for peak count


export const showLive = (params) => {
    PlotDayLive_Noise(37833)
}

export const PlotDayLive_Noise = async (sid) => {

    let series1 = []
    let series2 = []
    let series3 = []

    // ave the current (actual) values here
    let aktVal = {}

    // read the data from the server
    const url = `http://localhost:3004/getsensordata?type=noise&sensorid=${sid}`
    let ret = await fetch(url)
        .catch(e => {
            logerror(e)
        });
    let sensors = await ret.json()
    let lastidx = sensors.count-1
    // Put values into the arrays
    let cnt = 0
    sensors.values.forEach((x) => {
        let dat = new Date(x.datetime).getTime()
        series1.push([dat, x.noise_LAeq])
        series2.push([dat, x.noise_LA_max])
        series3.push([dat, x.noise_LA_min])			// put data and value into series array
    })

    if (sensors.values.length != 0) {
        // Aktuelle Werte speichern
        aktVal['LAeq'] = sensors.values[lastidx].noise_LAeq
        aktVal['LAMax'] = sensors.values[lastidx].noise_LA_max
        aktVal['LAMin'] = sensors.values[lastidx].noise_LA_min

        // InfoTafel füllen
        let infoTafel =
            '<table class="infoTafel"><tr >' +
            '<th colspan="3">Aktuelle Werte</th>' +
            '</tr><tr>' +
            '<td>LAeq</td><td>' + (aktVal.LAeq).toFixed(1) + '</td><td>dbA</td>'
        infoTafel +=
            '</tr><tr>' +
            '<td>LAmin</td><td>' + (aktVal.LAMin).toFixed(0) + '</td><td>dbA</td>'
        infoTafel +=
            '</tr><tr>' +
            '<td>LAmax</td><td>' + (aktVal.LAMax).toFixed(0) + '</td><td>dbA</td>'
        infoTafel +=
            '</tr></table>' +
            '</div>'
    }
    let txtMeldung = false


    // Plot-Options
    let options = utils.createGlobObtions()

    let series_LAeq = {
        name: 'LAeq',
        data: series1,
        color: utils.colors.eq,
        yAxis: 0,
        zIndex: 1,
        marker: {
            enabled: false,
            symbol: 'square',
        },
        visible: true,
        fillColor: {
            linearGradient: [0, 600, 0, 0],
            stops: [
                [0, 'rgb(238,223,236)'],
                [1, 'rgb(238,223,236)']
            ]
        },
    }

    let series_LAMax = {
        name: 'LAmax',
        data: series2,
        color: utils.colors.max,
        yAxis: 0,
        zIndex: 0,
        marker: {
            enabled: false,
            symbol: 'square',
        },
        visible: true,
        fillColor: {
            linearGradient: [0, 600, 0, 0],
            stops: [
                [0, 'rgb(255,233,236)'],
                [1, 'rgb(255,233,236)']
            ]
        },
//            fillOpacity: 0.2,
    }

    let series_LAMin = {
        name: 'LAmin',
        data: series3,
        color: utils.colors.min,
        yAxis: 0,
        zIndex: 6,
        marker: {
            enabled: false,
            symbol: 'square',
        },
        visible: true,
        fillColor: {
            linearGradient: [0, 600, 0, 0],
            stops: [
                [0, 'rgb(219,216,217)'],
                [1, 'rgb(219,216,217)']
            ]
        },
    }

    let yAxis_LAeq = {													// 1
        title: {
            text: 'dbA',
            style: {
                color: 'black'
            }
        },
        max: noise_ymax,
        min: noise_ymin,
//            opposite: true,
        tickAmount: 10,
        useHTML: true,
    }

    options.series = []
    options.yAxis = []
    options.series[0] = series_LAeq
    options.series[1] = series_LAMin
    options.title.text = 'Noise level for one day'
    options.subtitle.useHTML = true
    options.subtitle.text = '2.5min log. average values <br /> &nbsp'
    options.series[2] = series_LAMax
//        options.yAxis[2] = yAxis_LAMin
    options.yAxis[0] = yAxis_LAeq
//        options.yAxis[1] = yAxis_LAMax
    options.chart.zoomType = 'x'
    options.chart.type = 'area'
    options.chart.resetZoomButton=  {
        position: {
            align: 'left',
            verticalAlign: 'bottom',
            x: 20,
            y: -50,
        },
        relativeTo: 'chart'
    }


    let noDataTafel = '<div class="errTafel">' +
        'Für heute liegen leider keine Daten vor!<br /> Bitte den Sensor überprüfen!\' <br />' +
        '</div>'


    let navy = 20
    let navbreit = 55
    let navtxt = ['-24h', '-12h', 'live', '+12h', '+24h']
    let navtime = [-24, -12, 0, 12, 24]

    let chr = Highcharts.chart('dlive', options, function (chart) {
        utils.addSensorID2chart(chart, sensors.props, document.getElementById('dlive').offsetWidth)
        // let breit = $(window).width()
        // let navx = breit-350
        // chart.renderer.label(
        //     infoTafel,
        //     breit - 250,
        //     78, 'rect', 0, 0, true)
        //     .css({
        //         fontSize: '10pt',
        //         color: 'green'
        //     })
        //     .attr({
        //         zIndex: 5,
        //     }).add()
        // for (let i = 0; i < navtxt.length; i++) {
        //     renderPfeil(i, chart, navx + (i * navbreit), navy, navtxt[i], navtime[i])
        // }
        if (txtMeldung == true) {
            let labeText = ''
            let errtext = chart.renderer.label(
                noDataTafel,
                250,
                120, 'rect', 0, 0, true)
                .css({
                    fontSize: '18pt',
                    color: 'red'
                })
                .attr({
                    zIndex: 1000,
                    stroke: 'black',
                    'stroke-width': 2,
                    fill: 'white',
                    padding: 10,
                }).add()
        }
    })
}

let butOpts = [
    {fill: 'lightblue', r: 2},
    {fill: 'blue', r: 2, style: {color: 'white'}},
    {fill: 'lightblue', r: 2},
    {fill: 'lightblue', r: 2}
]


function renderPfeil(n, chart, x, y, txt, time) {
    chart.renderer.button(txt, x, y, null, butOpts[0], butOpts[1], butOpts[2], butOpts[3])
        .attr({
            id: 'button' + n,
            zIndex: 3,
            width: 30,
        })
        .on('click', function () {
            prevHour(time)
        })
        .add()
}

function prevHour(hours) {
    console.log("Zurück um ", hours, "Stunden")
    let start
    if (startDay == "") {
        start = moment()
        start.subtract(24, 'h')
    } else {
        start = moment(startDay)
    }
    let mrk = moment()
    mrk.subtract(24, 'h')
    let startDay = ""
    if (hours < 0) {
        start.subtract(Math.abs(hours), 'h')
        startDay = start.format("YYYY-MM-DDTHH:mm:ssZ")
    } else if (hours > 0) {
        start.add(hours, 'h')
        if (!start.isAfter(mrk)) {
            startDay = start.format("YYYY-MM-DDTHH:mm:ssZ")
        }
    }
    doPlot('live', startDay)
}