import { AfterViewInit, Component, OnInit, ElementRef, ViewChild, Input } from '@angular/core';
import { LineChartData, LineChartDataShape } from 'britecharts';
import { LineChartFactory } from './line-chart-factory';
import { Selection, select } from 'd3';
import { DateTime } from 'luxon';
import {addSvgResize} from '../../../../helpers/resize.helper';

@Component({
    selector: 'onguard-line-chart',
    templateUrl: './line-chart.component.html',
    styleUrls: ['./line-chart.component.scss'],
})
export class LineChartComponent implements AfterViewInit {
    @Input() xAxisLabel: string = '';
    @Input() yAxisLabel: string = '';

    @Input() valueLabel: string = 'PacketsLost';
    @Input() dateLabel: string = 'TimeStamp';
    @Input() topicLabel: string = 'Packet Loss';

    @Input() height = 500;
    @Input() width = 1000;

    @Input() xAxisCustomFormat = '%H:%M:%S.%L';

    @Input() data: any[];

    @Input() grid: 'full' | 'horizontal' | 'vertical' = null;

    @Input() tooltip = false;
    @Input() tooltipTitle: string;

    @ViewChild('lineChartContainer') containerElement: ElementRef<HTMLDivElement>;

    private container: Selection<HTMLDivElement, LineChartData, HTMLDivElement, any>;

    constructor() {}

    ngAfterViewInit(): void {
        this.container = select(this.containerElement.nativeElement);

        const { chart, chartTooltip } = LineChartFactory.build({
            lineCurve: 'basis',
            height: this.height,
            width: this.width,
            xAxisFormat: 'custom',
            xAxisCustomFormat: this.xAxisCustomFormat,
            xAxisLabel: this.xAxisLabel,
            yAxisLabel: this.yAxisLabel,
            tooltip: this.tooltip,
            grid: this.grid,
        });

        const lineData = this.data
            .sort((a, b) => parseInt(a[this.dateLabel]) - parseInt(b[this.dateLabel]))
            .map((record) => ({
                date: DateTime.fromMillis(parseInt(record[this.dateLabel])).toString(),
                value: record[this.valueLabel] as number,
                topicName: (record[this.topicLabel] || this.topicLabel) as string,
                name: 'name',
            })) as LineChartDataShape[];

        this.container.datum({ data: lineData }).call(chart);

        if (chartTooltip) {
            if (this.tooltipTitle) {
                chartTooltip.title(this.tooltipTitle);
            }
            const tooltipContainer = this.container.select(
                '.metadata-group .vertical-marker-container',
            );
            tooltipContainer.datum([]).call(chartTooltip as any);
        }
        addSvgResize(this.containerElement.nativeElement);
    }
}