// ---------------------------------------------------------
// Einstellungen
// ---------------------------------------------------------

const HISTORY_INSTANCE = 'history.0';

// Hier den festen Datenpunkt eintragen
const DATA_POINT = 'DEIN DATENPUNKT MIT HISTORY';

// Name für den Flexcharts-Aufruf
const MESSAGE_NAME = 'verbrauchHistory';

// Anzahl der angezeigten Kalendertage
const DAYS = 14;

// Ein aggregierter History-Wert pro Tag
const STEP_MS = 24 * 60 * 60 * 1000;

// Anzahl der Nachkommastellen
const DECIMALS = 2;

// Diagrammüberschrift
const TITLE = `Verbrauch der letzten ${DAYS} Tage`;


// ---------------------------------------------------------
// Einheit sicher aus common.unit lesen
// ---------------------------------------------------------

function getDataPointUnit(id) {
    const object = getObject(id);

    if (!object) {
        console.warn(`Das Objekt ${id} wurde nicht gefunden.`);
        return '';
    }

    if (object.type !== 'state') {
        console.warn(
            `${id} ist kein State, sondern vom Typ "${object.type}".`
        );

        return '';
    }

    /*
     * Reflect.get vermeidet den Typfehler des Editors.
     * Es wird damit object.common.unit gelesen.
     */
    const unit = Reflect.get(object.common, 'unit');

    return typeof unit === 'string'
        ? unit.trim()
        : '';
}


const UNIT = getDataPointUnit(DATA_POINT);

if (UNIT) {
    console.info(
        `Einheit von ${DATA_POINT}: ${UNIT}`
    );
} else {
    console.warn(
        `Für ${DATA_POINT} wurde keine Einheit gefunden.`
    );
}


// ---------------------------------------------------------
// Zahlenwert deutsch formatieren
// ---------------------------------------------------------

function formatNumber(value) {
    const number = Number(value);

    if (!Number.isFinite(number)) {
        return '';
    }

    return number.toLocaleString('de-DE', {
        minimumFractionDigits: DECIMALS,
        maximumFractionDigits: DECIMALS
    });
}


// ---------------------------------------------------------
// Zahlenwert mit Einheit formatieren
// ---------------------------------------------------------

function formatValue(value) {
    const formattedNumber = formatNumber(value);

    if (!formattedNumber) {
        return '';
    }

    return UNIT
        ? `${formattedNumber} ${UNIT}`
        : formattedNumber;
}


// ---------------------------------------------------------
// Flexcharts-Anfrage empfangen
// ---------------------------------------------------------

onMessage(MESSAGE_NAME, (_httpParams, callback) => {
    const end = Date.now();

    /*
     * Beginn des ersten angezeigten Tages auf
     * 00:00 Uhr setzen.
     */
    const startDate = new Date();

    startDate.setHours(0, 0, 0, 0);

    startDate.setDate(
        startDate.getDate() - (DAYS - 1)
    );

    const start = startDate.getTime();

    getHistory(
        HISTORY_INSTANCE,
        {
            id: DATA_POINT,
            start: start,
            end: end,

            /*
             * Tagesmaximum:
             *
             * Geeignet für einen Tageszähler, der während
             * des Tages hochzählt und nachts zurückgesetzt wird.
             */
            aggregate: 'max',

            // Ein Wert pro Tag
            step: STEP_MS,

            timeout: 10000,

            // Keine zusätzlichen Werte außerhalb des Zeitraums
            removeBorderValues: true,

            // Fehlende Werte nicht künstlich auffüllen
            ignoreNull: false
        },
        (error, result) => {
            if (error) {
                console.error(
                    `History-Fehler bei ${DATA_POINT}: ` +
                    JSON.stringify(error)
                );

                callback(
                    createErrorChart(
                        'Die History-Daten konnten nicht geladen werden.'
                    )
                );

                return;
            }

            if (!Array.isArray(result) || result.length === 0) {
                callback(
                    createErrorChart(
                        'Für den gewählten Zeitraum wurden keine Daten gefunden.'
                    )
                );

                return;
            }

            const historyData = result
                .filter(item => {
                    const timestamp = Number(item?.ts);

                    return (
                        Number.isFinite(timestamp) &&
                        timestamp >= start &&
                        timestamp <= end
                    );
                })
                .sort((a, b) => {
                    return Number(a.ts) - Number(b.ts);
                });

            if (historyData.length === 0) {
                callback(
                    createErrorChart(
                        'Es wurden keine gültigen History-Einträge gefunden.'
                    )
                );

                return;
            }

            const labels = [];
            const seriesData = [];

            for (const item of historyData) {
                const timestamp = Number(item.ts);
                const date = new Date(timestamp);

                labels.push(
                    date.toLocaleDateString('de-DE', {
                        day: '2-digit',
                        month: '2-digit'
                    })
                );

                if (
                    item.val === null ||
                    item.val === undefined ||
                    item.val === ''
                ) {
                    seriesData.push({
                        value: null,

                        label: {
                            show: false
                        }
                    });

                    continue;
                }

                const value = Number(item.val);

                if (!Number.isFinite(value)) {
                    seriesData.push({
                        value: null,

                        label: {
                            show: false
                        }
                    });

                    continue;
                }

                const roundedValue = Number(
                    value.toFixed(DECIMALS)
                );

                /*
                 * Der fertige Beschriftungstext wird direkt
                 * am jeweiligen Datenwert gespeichert.
                 *
                 * Dadurch ist keine JavaScript-Formatterfunktion
                 * innerhalb des ECharts-Objekts erforderlich.
                 */
                seriesData.push({
                    value: roundedValue,

                    label: {
                        formatter: formatValue(roundedValue)
                    }
                });
            }

            const hasValidValues = seriesData.some(item => {
                return item.value !== null;
            });

            if (!hasValidValues) {
                callback(
                    createErrorChart(
                        'Für die ausgewählten Tage wurden keine Zahlenwerte gefunden.'
                    )
                );

                return;
            }

            const seriesName = UNIT
                ? `Verbrauch (${UNIT})`
                : 'Verbrauch';

            const option = {
                backgroundColor: 'transparent',

                textStyle: {
                    fontFamily: 'Arial, sans-serif',
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                },

                title: {
                    text: TITLE,
                    left: 'center',

                    textStyle: {
                        color: '#000000',
                        fontFamily: 'Arial, sans-serif',
                        fontStyle: 'normal',
                        fontWeight: 'bold',
                        fontSize: 16,

                        textBorderWidth: 0,
                        textShadowBlur: 0
                    }
                },

                tooltip: {
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow'
                    },

                    textStyle: {
                        fontFamily: 'Arial, sans-serif',
                        fontStyle: 'normal',
                        fontWeight: 'normal'
                    }
                },

                grid: {
                    left: 60,
                    right: 30,

                    // Platz für die senkrechten Beschriftungen
                    top: 120,

                    bottom: 70,
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    data: labels,

                    axisLabel: {
                        interval: 0,
                        rotate: 0,
                        hideOverlap: true,

                        color: '#000000',
                        fontFamily: 'Arial, sans-serif',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontSize: 11,

                        textBorderWidth: 0,
                        textShadowBlur: 0
                    },

                    axisLine: {
                        lineStyle: {
                            color: '#000000'
                        }
                    },

                    axisTick: {
                        alignWithLabel: true,

                        lineStyle: {
                            color: '#000000'
                        }
                    }
                },

                yAxis: {
                    type: 'value',

                    // Einheit automatisch aus dem Datenpunkt
                    name: UNIT,

                    min: 0,

                    nameTextStyle: {
                        color: '#000000',
                        fontFamily: 'Arial, sans-serif',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontSize: 12,

                        textBorderWidth: 0,
                        textShadowBlur: 0
                    },

                    axisLabel: {
                        color: '#000000',
                        fontFamily: 'Arial, sans-serif',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontSize: 11,

                        textBorderWidth: 0,
                        textShadowBlur: 0
                    },

                    axisLine: {
                        show: true,

                        lineStyle: {
                            color: '#000000'
                        }
                    },

                    splitLine: {
                        lineStyle: {
                            opacity: 0.25
                        }
                    }
                },

                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100
                    }
                ],

                series: [
                    {
                        name: seriesName,
                        type: 'bar',
                        data: seriesData,

                        barMaxWidth: 35,

                        label: {
                            show: true,

                            // Wert um 90 Grad drehen
                            rotate: 90,

                            // Wert oberhalb des Balkens anzeigen
                            position: 'top',

                            distance: 8,
                            align: 'left',
                            verticalAlign: 'middle',

                            // Schwarze Schrift
                            color: '#000000',

                            fontFamily: 'Arial, sans-serif',
                            fontStyle: 'normal',
                            fontWeight: 'bold',
                            fontSize: 12,

                            // Keine Textumrandung
                            textBorderWidth: 0,
                            textBorderColor: 'transparent',

                            // Kein Texthintergrund
                            backgroundColor: 'transparent',
                            borderWidth: 0,

                            // Kein Textschatten
                            textShadowBlur: 0,
                            textShadowColor: 'transparent',
                            textShadowOffsetX: 0,
                            textShadowOffsetY: 0
                        },

                        itemStyle: {
                            borderRadius: [4, 4, 0, 0]
                        },

                        emphasis: {
                            label: {
                                color: '#000000',
                                fontFamily: 'Arial, sans-serif',
                                fontStyle: 'normal',
                                fontWeight: 'bold',

                                textBorderWidth: 0,
                                textBorderColor: 'transparent',

                                backgroundColor: 'transparent',
                                borderWidth: 0,

                                textShadowBlur: 0,
                                textShadowColor: 'transparent'
                            }
                        }
                    }
                ]
            };

            callback(option);
        }
    );
});


// ---------------------------------------------------------
// Fehlerdiagramm erzeugen
// ---------------------------------------------------------

function createErrorChart(message) {
    return {
        backgroundColor: 'transparent',

        textStyle: {
            fontFamily: 'Arial, sans-serif',
            fontStyle: 'normal',
            fontWeight: 'normal'
        },

        title: {
            text: 'Flexcharts-Fehler',
            subtext: message,
            left: 'center',
            top: 'middle',

            textStyle: {
                color: '#000000',
                fontFamily: 'Arial, sans-serif',
                fontStyle: 'normal',
                fontWeight: 'bold',

                textBorderWidth: 0,
                textShadowBlur: 0
            },

            subtextStyle: {
                color: '#000000',
                fontFamily: 'Arial, sans-serif',
                fontStyle: 'normal',
                fontWeight: 'normal',

                textBorderWidth: 0,
                textShadowBlur: 0
            }
        },

        xAxis: {
            show: false
        },

        yAxis: {
            show: false
        },

        series: []
    };
}