import * as Highcharts from "highcharts"
// Highcharts.heatmap(Highcharts);

export class HighChartHeatMapCreate {

    private readonly id: string;

    private highChart: any;
    private chart: any;
    private xAxis: Array<any> = [];
    private yAxis: Array<any> = [];
    private series: Array<any> = [];
    private legend: any = null;
    private tooltip: any = null;
    private colorAxis: any = null;

    constructor(id: string) {
        this.id = id;
    }

    public setChart(type: string = 'heatmap'): void{
        this.chart = {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 80,
            plotBorderWidth: 1
        };
    }

    public setXAxis(text: string,  reversed: boolean = true){
        this.xAxis.push({
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
        });
    }

    public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){
        this.yAxis.push({
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null
        });
    }

    public setColorAxis(): void {
        this.colorAxis = {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        }
    }

    public setLegend(enabled: boolean = false){
        this.legend = {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        }
    }

    public setTooltip(pointFormat: string, headerFormat: string = '<b>{series.name}</b><br/>'){
        this.tooltip = {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        }
    }

    // public setSeries(name: string)
    public setSeries(data: any){
        // let series: any = {
        //     name: name,
        //     data: [],
        // }
        // if (color == null || valueSuffix == null){
        //     this.series.push(series);
        //     return
        // }

        // series.yAxis = yAxis;
        // series.tooltip = {
        //     valueSuffix: valueSuffix
        // };
        // series.color = color;
        this.series.push({
            name: 'Sales per employee',
            borderWidth: 1,
            data: data,
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        });
    }

    public init(): void{
        const options = this.getOptions();
        this.highChart = Highcharts.chart(this.id, options);
        // return this.highChart;
    }

    private getOptions(){
        let options: any = {
            credits: {
                enabled: false
            },
            chart: this.chart,
            title: {
                text: null
            },
            xAxis: this.xAxis,
            yAxis: this.yAxis,
            colorAxis: this.colorAxis,
            tooltip: this.tooltip,
            series: this.series
        };
        if (this.legend != null)
            options.legend = this.legend;

        return options;
    }

    public updateSeries(index: number, data: Array<any>): void{
        this.highChart.series[index].setData(data);
    }

    public updateXAxis(categories: Array<any>, index: number = 0){
        this.highChart.xAxis[index].setCategories(categories);
    }
}