import * as dt from './datetime.js'
import * as utils from "./chart_utilities.js"
import { showChart, loadAll } from './showcharts.js'
import * as mapu from './map_utilities.js'

export const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
const dba = [100, 80, 60, 40, 20, 0, -999];

export function getColor(d) {
    let val = parseInt(d);
    for (let i = 0; i < dba.length; i++) {
        if (val >= dba[i]) {
            return (colorscale[i]);
        }
    }
}

export const buildLegend = (mpp) => {
    let legend = L.control({position: 'bottomright'})
    legend.onAdd = function () {
        let div = L.DomUtil.create('div', 'info legend')
        let div_color = L.DomUtil.create('div', 'info legend inner', div)
        div_color.innerHTML += 'dbA<br />';
        // loop through our density intervals and generate a label with a colored square for each interval
        for (let i = 0; i < dba.length - 1; i++) {
            div_color.innerHTML +=
                '<i style="background:' + colorscale[i] + '"></i>' +
                '&nbsp;&nbsp;' + dba[i] + (i == 0 ? '+' : '') + '<br />'
        }
        div_color.innerHTML += '&nbsp;<i style="background:' + getColor(dba[dba.length - 1]) + '"></i> offline'
        return div
    };
    legend.addTo(mpp.map)
}

export async function buildMarkers(params, mpp) {
    const url = mpp.APIURL + `type=noise&box=${mpp.bounds.toBBoxString()}`
    let sensors = await utils.fetchfromserver(url)
    if (!sensors.err) {
        let markers = L.markerClusterGroup({
            spiderfyOnMaxZoom: true,
            showCoverageOnHover: false,
            zoomToBoundsOnClick: true,
            // disableClusteringAtZoom: 14,
            iconCreateFunction: function (cluster) {
                let mymarkers = cluster.getAllChildMarkers();
                let color = getMedian(mymarkers);
                return new L.Icon({
                    iconUrl: buildIcon(color, cluster.getChildCount(), 0),
                    iconSize: [35, 35]
                });
            },
        });

        for (let x of sensors.values) {
            if ((params.weeks > 0) && (x.weeks > params.weeks)) {
                continue
            }
            // if (x.value <= -4) {
            //     continue
            // }
            let marker = L.marker([x.location[1], x.location[0]], {
                icon: new L.Icon({
                    iconUrl: buildIcon(getColor(parseInt(x.value)), 0, x.indoor),
                    iconSize: [35, 35],
                }),
                name: x.id,
                value: x.value,
                url: '/graph?sid=' + x.id,
                lastseen: dt.formatISODate(x.lastseen),
                indoor: x.indoor
            })
            .on('click', e => onMarkerClick(e, true, sensors.popuptxt, params, mpp))        // define click- and
            markers.addLayer(marker);
        }
        mpp.map.addLayer(markers);
        return sensors.lastdate
    } else {
        utils.showError(sensors.err)
    }
}


function buildIcon(color, n, indoor) {
    let x = 100;
    if (n < 10) {
        x = 200;
    } else if (n < 100) {
        x = 150;
    }
    let txtColor = "black";
    if (color == colorscale[5]) {
        txtColor = "white"
    }
    let icon = '<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">' +
        '<circle cx="300" cy="300" r="250" fill="' + color + '" stroke="black" stroke-width="20" />';
    if (n !== 0) {
        icon +=
            '<text id="marker_text" x="' + x + '" ' +
            'y="400" font-size="1500%" font-family="Verdana,Lucida Sans Unicode,sans-serif" ' +
            'fill="' + txtColor + '">' + n + '</text>';
    }
    if(indoor) {
        icon += '<line x1="125" y1="475" x2="475" y2="125" stroke="black" stroke-width="20" />'
    }
    icon += '</svg>';
    return encodeURI("data:image/svg+xml," + icon).replace(new RegExp('#', 'g'), '%23');
}


async function bauPopupText(item, txts) {
    let addr = ''
    let offlinetext = `
<tr><td colspan="2"><span style="color:red;">${txts.offline}</span></td></tr>
<tr><td>${txts.lastseen}:</td><td>${item.lastseen}</td></tr>`

    let normaltext = `
<tr></tr><tr><td>LA_max:</td><td>${item.value}</td></tr>`
    let popuptext = `
<div id="infoTitle">
<h4>${txts.sensor}: ${item.name}</h4>
<div class="addr">${addr}</div>
<div id="infoTable">
    <table>
        <tr><td colspan="2"><span style="color:limegreen;">${item.indoor==1 ? "indoor" : ""}</span></td></tr>
        ${item.value < 0 ? offlinetext : normaltext}
    </table>
    <div id="infoBtn">
        <a href="#" class="speciallink">${txts.showchart}</a>
    </div>
</div>
</div>`
return popuptext
}

async function onMarkerClick(e, click, txts, params, mpp) {
    let item = e.target.options;
    let popuptext = await bauPopupText(item, txts)
    e.target.bindPopup(popuptext).openPopup();                               // show the popup
    let addr = await utils.addAddress(item.name)
    document.querySelector('#infoTitle .addr').innerHTML = `${addr.street}<br />${addr.plz} ${addr.city}`
    let link = document.querySelector('.speciallink')
    link.addEventListener('click', async function (ev) {
        console.log(`Event clicked: ${mpp.clickedSensor}`)
        params.sid = item.name
        let ok = await showChart(params, 'live', 'dlive')
        if (ok) {
            let triggerEl = document.querySelector(`#livetab`)
            bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
            utils.setCurrentTab('livetab')
            params.center = [e.latlng.lat, e.latlng.lng]
            mpp.map.setView([e.latlng.lat, e.latlng.lng]);
            ev.preventDefault()
            await loadAll(params)
        }
    })
}


// With all Markers in cluster (markers) calculate the median
// of the values. With this median fetch the color and return it.
// If there are 'offline' sensors (value == -1) strip then before
// calculating the median. If there are only offline sensor, return
// color of value==-1 (dark gray).
function getMedian(markers, value) {
    markers.sort(function (a, b) {                        // first sort, the lowest first
        let y1 = a.options.value;
        let y2 = b.options.value;
        if (y1 < y2) {
            return -1;
        }
        if (y2 < y1) {
            return 1;
        }
        return 0;
    });
    // console.log(markers);
    let i = 0;                                            // now find the 'offlines' (value == -1)
    for (i = 0; i < markers.length; i++) {
        if (markers[i].options.value > 0) {
            break;
        }
    }
    markers.splice(0, i);                                // remove these from array
    let lang = markers.length;
    if (lang > 1) {                                     //
        if ((lang % 2) == 1) {                          // uneven ->
            return getColor(markers[(Math.floor(lang / 2))].options.value);  // median is in the middle
        } else {                                        // evaen ->
            lang = lang / 2;            // median is mean of both middle values
            // console.log(lang);
            let wert = (markers[lang - 1].options.value +
                markers[lang].options.value) / 2;
            return getColor(wert);
        }
    } else if (lang == 1) {                             // only one marker -> return its color
        return getColor(markers[0].options.value);
    }
    return getColor(-1);                            // only offlines
}