/**
 * Creates a renderer for a CanvasRenderingContext2D (2d canvas context).
 *
 * @param {HTMLCanvasElement} canvas The canvas to render on.
 * @author Martin Hövre <martin.hovre@opencubes.io>
 * @license MIT
 */
function renderer2d(canvas) {
  // The context for the renderer
  const ctx = canvas.getContext('2d')
  return {
    ctx,
    /**
     * Clears the canvas.
     *
     * @author Martin Hövre <martin.hovre@opencubes.io>
     * @license MIT
     */
    clear() {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    },
    /**
     * Renders a string on the canvas.
     *
     * @param {string} text The text to be rendered.
     * @param {number} x The x position to render the start of the text.
     * @param {number} y The y position to render the start of the text.
     * @author Martin Hövre <martin.hovre@opencubes.io>
     * @license MIT
     */
    text(text, x, y) {
      const fontSize = parseInt((/(\d+)px/.exec(ctx.font) || [, 10])[1]) || 10
      ctx.fillText(text, x, y + fontSize)
    },
    /**
     * Render a circle on the canvas.
     *
     * @param {object} options The options for the circle.
     * @param {number} options.radius The circle radius.
     * @param {number} options.x The circles x position.
     * @param {number} options.y The circles y position.
     * @param {string} [options.fill] The fill color of the circle.
     * @param {number} [options.borderWidth] The circle border width.
     * @param {string} [options.borderColor] The circle border color.
     * @author Martin Hövre <martin.hovre@opencubes.io>
     * @license MIT
     */
    circle(options) {
      ctx.beginPath()
      ctx.arc(options.x || 0, options.y || 0, options.radius || 0, 0, 2 * Math.PI)
      if (options.fill) {
        const fill = ctx.fillStyle
        ctx.fillStyle = options.fill
        ctx.fill()
        ctx.fillStyle = fill
      }
      if (options.borderWidth)
        ctx.lineWidth = options.borderWidth
      if (options.borderColor)
        ctx.strokeStyle = options.borderColor
      if (options.borderWidth || options.borderColor)
        ctx.stroke()
    },
    /**
     * Create a line from one position to another or a sequence of points.
     *
     * @example
     * line(0, 0, 10, 10, 1) // Create a line from position 0,0 to 10,10 with line width of 1
     *
     * // Create a line from position 0,0 to 10,10 with line width of 1 and a color of red
     * line(0, 0, 10, 10, 1, 'red') // or
     * line(0, 0, 10, 10, 1, '#ff0000')
     *
     * @example
     * line(1, [ // Create a line from 0,0 -> 10,10 -> 10,20 with line width 1
     *   {x: 0, y: 0},
     *   {x: 10, y: 10},
     *   {x: 10, y: 20},
     * ])
     *
     * // Create a line from 0,0 -> 10,10 -> 10,20 with line width 1 and color of red
     * line(1, 'red', [
     *   {x: 0, y: 0},
     *   {x: 10, y: 10},
     *   {x: 10, y: 20},
     * ]) // or
     * line(1, '#ff0000', [
     *   {x: 0, y: 0},
     *   {x: 10, y: 10},
     *   {x: 10, y: 20},
     * ])
     *
     * @param {number} x1 The first x position or line width.
     * @param {number|string|Array<{x: number, y: number}>} y1 The first y position or line color or a array of points.
     * @param {number|Array<{x: number, y: number}>} x2 The second x position or a array of points.
     * @param {number} y2 The second y position.
     * @param {number} width The width of the line.
     * @param {number} [color='#000000'] Color of the line.
     * @author Martin Hövre <martin.hovre@opencubes.io>
     * @license MIT
     */
    line(x1, y1, x2, y2, width, color='#000000') {
      if (typeof x1 === 'number' && typeof y1 === 'number' && typeof x2 === 'number' && typeof y2 === 'number') {
        ctx.lineWidth = typeof width === 'number' ? width : 1
        ctx.strokeStyle = color
        ctx.beginPath()
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.stroke()
      } else {
        const width = x1
        let color = y1
        let points = x2
        if (Array.isArray(color)) {
          points = color
          color = '#000000'
        }
        ctx.lineWidth = typeof width === 'number' ? width : 1
        ctx.strokeStyle = color
        ctx.beginPath()
        const point = points.shift()
        ctx.moveTo(point.x, point.y)
        for (const point of points)
          ctx.lineTo(point.x, point.y)
        ctx.stroke()
      }
    },
    /**
     * Create a continuous renderer i.e. a function that is called on every browser frame.
     *
     * @param {Function} fn The function to be run at every frame.
     * @author Martin Hövre <martin.hovre@opencubes.io>
     * @license MIT
     */
    render(fn) {
      const renderer = () => {
        requestAnimationFrame(renderer)
        fn()
      }
      renderer()
    }
  }
}