/**
 * Smooth Area Chart
 */
class SmoothAreaChart extends PointChart {
    /**
     * Creates a new instance of the SmoothAreaChart class
     *
     * @param {HTMLCanvasElement} canvas - The canvas element to draw the chart on
     * @param {Array<Object>} data - The data to visualize on the chart
     * @param {Object} settings - The settings for the chart
     * @param {ZoomManager} zoom - The zoom manager for the chart.
     */
    constructor(canvas, data, settings, zoom) {
        // Call the constructor of the parent class (PointChart)
        super(canvas, data, settings, zoom)
    }

    /**
     * Draws the smooth area chart on the canvas.
     * @param {Boolean} async - Says if the chart should be drawn synchronously or asynchronously
     */
    draw(async = true) {
        // Clear the canvas and draw the axis
        this.clear()
        this.drawAxis()

        this.ctx.lineWidth = this.settings.lineWidth


        // Define function for async
        let fn = () => {
            // Iterate over each category in the data
            this.data.forEach(categ => {
                // Begin a new path for drawing lines
                this.ctx.beginPath()
                this.ctx.lineJoin = "round"
                this.ctx.strokeStyle = categ.color

                // Calculate the starting point for the line
                let pos1 = this.getPointPos(0, categ.values[0])
                this.ctx.moveTo(pos1.x, pos1.y)

                let xmax = 0 // rightmost point (some lines can be shorter)

                // Draw the Bezier curve
                for (let i = 0; i < this.dataLen - 1; i++) {
                    // Calculate left point coordinates

                    let leftPos = this.getPointPos(i, categ.values[i])

                    // Calculate right point coordinates
                    let rightPos = this.getPointPos(i + 1, categ.values[i + 1])

                    // Find middle point
                    let xm = (leftPos.x + rightPos.x) / 2
                    // Find quarter points
                    let xl = (leftPos.x + xm) / 2
                    let xr = (rightPos.x + xm) / 2

                    // Draw a curve that smoothly connects the points
                    this.ctx.bezierCurveTo(xl, leftPos.y, xr, rightPos.y, rightPos.x, rightPos.y);
                    xmax = rightPos.x
                }

                // Complete the area by connecting the last point to the x-axis
                this.ctx.lineTo(xmax, this.zoomBounds.xAxis)
                this.ctx.lineTo(this.zoomBounds.left, this.zoomBounds.xAxis)

                // Set transparency and fill the area
                this.ctx.globalAlpha = 0.5
                this.ctx.fillStyle = categ.color
                this.ctx.closePath()
                this.ctx.fill()
                this.ctx.stroke()

                // Reset transparency
                this.ctx.globalAlpha = 1
            })

            // Draw points on the chart if required
            if (this.settings.displayPoints)
                this.data.forEach((categ, colId) => { this.drawPoints(categ.values, colId, categ.color) })
        }

        // Draw the chart
        async ? setTimeout(() => fn(), 0) : fn()
    }
}
