import { __decorate, __metadata } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import ApexCharts from 'apexcharts';
import { keyed } from 'lit/directives/keyed.js';
import { roundNumber } from '../shared/utils/func/common';
let EaasChart = class EaasChart extends LitElement {
    constructor() {
        super(...arguments);
        this.data = [];
        this.seriesNames = [];
        this.chartType = 'bar';
        this.barColor = '#59AFF8';
        this.lineColors = [
            '#3e95cd',
            '#ff7f0e',
            '#2ca02c',
            '#d62728',
            '#9467bd',
            '#8c564b',
            '#e377c2',
            '#7f7f7f',
            '#bcbd22',
            '#17becf'
        ];
        this.hideLegend = false;
        this.chartKey = Date.now();
        this.prefix = ' kWh';
        this.yTickAmount = null;
        this.yStepSize = null;
        this.xLabelRotate = 0;
    }
    createRenderRoot() {
        return this;
    }
    render() {
        if (this.data.length === 0)
            return '';
        return html `${keyed(this.chartKey, html `<div id="chart"></div>`)}`;
    }
    firstUpdated(_changedProperties) {
        this._createChart();
    }
    updated(changedProperties) {
        if (changedProperties.has('data') || changedProperties.has('chartType')) {
            if (this._chart) {
                this._chart.destroy();
            }
            this.chartKey = Date.now();
            this.updateComplete.then(() => {
                this._createChart();
            });
        }
    }
    _createChart() {
        const container = this.chartContainer;
        if (!this.data.length)
            return;
        // 전체 데이터의 values 최대 길이를 기준으로 시리즈 수 결정 (행마다 길이가 다를 수 있음)
        const seriesCount = (this.data || []).reduce((max, item) => {
            const len = item?.values?.length || 0;
            return len > max ? len : max;
        }, 0);
        if (seriesCount === 0)
            return;
        // 라벨 추출
        const labels = this.data?.map(item => item.label) || [];
        // 시리즈 데이터 구성
        const chartSeries = [];
        // 각 시리즈별로 데이터 구성
        for (let i = 0; i < seriesCount; i++) {
            // 시리즈 이름 결정: seriesNames가 있으면 사용, 없으면 기본 이름 생성
            const seriesName = this.seriesNames[i] || `Series ${i + 1}`;
            const seriesData = this.data.map(item => item && Array.isArray(item.values) && i < item.values.length ? (item.values[i] ?? null) : null);
            chartSeries.push({
                name: seriesName,
                type: this.chartType,
                data: seriesData
            });
        }
        const prefix = this.prefix;
        const options = {
            chart: {
                type: this.chartType,
                height: '100%',
                width: '100%',
                toolbar: {
                    show: false
                },
                animations: {
                    enabled: false
                },
                zoom: {
                    enabled: false
                }
            },
            series: chartSeries,
            xaxis: {
                categories: labels,
                labels: {
                    rotate: this.xLabelRotate,
                    hideOverlappingLabels: true,
                    showDuplicates: false,
                    style: {
                        colors: '#aebff0cc',
                        fontSize: '11px'
                    }
                },
                axisBorder: {
                    show: true,
                    color: '#aebff0cc'
                },
                axisTicks: {
                    show: true,
                    color: '#aebff0cc'
                },
                tickAmount: 6
            },
            yaxis: {
                // min: 0,
                labels: {
                    style: {
                        colors: '#aebff0cc',
                        fontSize: '11px'
                    },
                    formatter: function (value) {
                        if (value == null || Number.isNaN(value))
                            return '';
                        return roundNumber(value, 1).toLocaleString() || '';
                    }
                },
                axisBorder: {
                    show: true,
                    color: '#aebff0cc'
                },
                axisTicks: {
                    show: true,
                    color: '#aebff0cc'
                },
                ...(this.yTickAmount ? { tickAmount: this.yTickAmount } : {}),
                ...(this.yStepSize ? { stepSize: this.yStepSize } : {})
            },
            grid: {
                padding: {
                    bottom: 0 // x축을 아래로 붙이기
                },
                yaxis: {
                    lines: {
                        show: false
                    }
                }
            },
            tooltip: {
                enabled: true,
                theme: 'dark',
                style: {
                    fontSize: '12px'
                },
                x: {
                    show: true
                },
                y: {
                    formatter: function (value) {
                        if (value == null || Number.isNaN(value))
                            return '';
                        return (roundNumber(value, 1).toLocaleString() || '') + prefix;
                    }
                }
            },
            plotOptions: {
                bar: {
                    distributed: false,
                    borderRadius: 9,
                    borderRadiusApplication: 'end'
                }
            },
            dataLabels: {
                enabled: false,
                offsetY: this.chartType === 'line' ? -10 : 0,
                formatter: function (val) {
                    if (val == null || Number.isNaN(Number(val)))
                        return '';
                    return roundNumber(Number(val), 1).toLocaleString() || '';
                }
            },
            colors: this.chartType === 'line' ? this.lineColors : [this.barColor],
            ...(this.chartType === 'line' ? { markers: { size: 3, strokeWidth: 0 }, stroke: { width: 2 } } : {}),
            legend: {
                show: !this.hideLegend,
                position: 'bottom',
                fontSize: '9px',
                labels: {
                    colors: '#ffffff' // 범례 폰트 색상을 흰색으로 설정
                },
                markers: {
                    size: 5
                }
            }
        };
        this._chart = new ApexCharts(container, options);
        this._chart?.render();
    }
};
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "data", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "seriesNames", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "chartType", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "barColor", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChart.prototype, "lineColors", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], EaasChart.prototype, "hideLegend", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "chartKey", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChart.prototype, "prefix", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Object)
], EaasChart.prototype, "yTickAmount", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Object)
], EaasChart.prototype, "yStepSize", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChart.prototype, "xLabelRotate", void 0);
__decorate([
    query('#chart'),
    __metadata("design:type", HTMLElement)
], EaasChart.prototype, "chartContainer", void 0);
EaasChart = __decorate([
    customElement('eaas-chart')
], EaasChart);
export { EaasChart };
//# sourceMappingURL=eaas-chart.js.map