class ChartLoader {
    constructor(canvas, detectionCanvas, parent, legend, dataDiv) {
        this.canvas = canvas
        this.detectionCanvas = detectionCanvas
        this.parent = parent
        this.legend = legend
        this.dataDiv = dataDiv
    }

    //Načtení dat
    loadData(code) {
        fetch("/api/charts/" + code, {
            method: 'GET',
            headers: {
                'Content-Type': 'json'
            }
        })
            .then(response => response.json())
            .then(data => {
                let metadata = data.metadata;
                metadata.custom_x_values = ""
                let table = data.table

                if (data !== null) {
                    this.drawChart(metadata, table)
                    this.parent.style.backgroundColor = metadata.backgroundColor
                }
                else
                    this.parent.innerHTML = "graph not found."
            })
    }


    addListener(newChart) {
        //Click
        document.addEventListener('mousemove', (e) => {
            const pos = {
                x: e.clientX,
                y: e.clientY
            }
            
            var ctx = this.detectionCanvas.getContext('2d');
            var pixelData = ctx.getImageData(pos.x, pos.y, 1, 1).data;

            if (pixelData[3] === 255) {
                let index = (pixelData[0] * 256 + pixelData[1]) * 256 + pixelData[2]
                let obj = newChart.objects[index]

                let divHitBox = this.dataDiv
                divHitBox.style.display = "block"

                // make the info fit into the chart div
                if (pos.x + divHitBox.clientWidth <= this.parent.clientWidth - 2)
                    divHitBox.style.left = pos.x + "px"
                else
                    this.dataDiv.style.left = pos.x - divHitBox.clientWidth + "px"

                if (pos.y + divHitBox.clientHeight <= parent.clientHeight - 2)
                    this.dataDiv.style.top = pos.y + "px"
                else
                    this.dataDiv.style.top = pos.y - divHitBox.clientHeight + "px"

                    this.dataDiv.style.display = "block"
                this.dataDiv.innerHTML = "<b>" + obj.name + "</b><br><p>" + obj.value + "</p>"
            }
            else {
                this.dataDiv.style.display = "none"
            }
        })

        window.addEventListener("resize", e => {
            //newChart.updateLegend(graphSettings.displayLegend, data)
            newChart.resizeCanvas(this.parent, this.legend.offsetHeight)
            newChart.draw()

            this.detectionCanvas.width = this.canvas.width
            this.detectionCanvas.height = this.canvas.height
            this.chart.drawDetectionMap(this.detectionCanvas.getContext("2d"))
        });
    }

    drawChart(graphSettings, data) {
        //objects = []
        this.chart = new Chart(this.canvas, data, graphSettings)
        this.chart.updateLegend(graphSettings.displayLegend, this.legend)

        this.chart.resizeCanvas(this.parent, this.legend.offsetHeight)

        this.detectionCanvas.width = this.canvas.width
        this.detectionCanvas.height = this.canvas.height

        //Choose the correct graph
        switch (graphSettings.type) {
            case "point":
                this.chart = new PointChart(this.canvas, data, graphSettings)
                break
            case "line":
                this.chart = new LineChart(this.canvas, data, graphSettings)
                break
            case "smoothline":
                this.chart = new SmoothLineChart(this.canvas, data, graphSettings)
                break
            case "pie":
                this.chart = new PieChart(this.canvas, data, graphSettings)
                break
            case "donut":
                this.chart = new DonutChart(this.canvas, data, graphSettings)
                break
            case "bar":
                this.chart = new BarChart(this.canvas, data, graphSettings)
                break
            case "area":
                this.chart = new AreaChart(this.canvas, data, graphSettings)
                break
            case "smootharea":
                this.chart = new SmoothAreaChart(this.canvas, data, graphSettings)
                break
            case "stacked":
                this.chart = new StackedChart(this.canvas, data, graphSettings)
                break
        }

        this.chart.draw()
        this.chart.drawDetectionMap(this.detectionCanvas.getContext("2d"))

        this.addListener(this.chart)
    }
}