/**
  Much credit needs to go to Leif Niemczik (https://leifs.website/), who took a large chunk of his time not only to explain the math of how I could make sure that curves had mirrored bezier points (and thus smooth), but he even coded it into a demo and then helped me extract it.
*/

if (typeof registerPaint !== "undefined") {
  registerPaint(
    "rough-edge",
    class {
      static get inputProperties() {
        return [
          '--rough-edge-padding', 
          '--rough-edge-debug', 
          '--rough-edge-background',
          '--rough-edge-severity',
          '--rough-edge-segment-length',
          '--rough-edge-max-segments'
        ]
      }
      
      drawCurve(_ctx, _curvePosition, _edgePadding, _startX = 0, _endX, _lastCurve, _curveSeverity = undefined, _debug = undefined) {
        let curveYPos = _curvePosition;
        let length = _endX - _startX;

        // random numbers
        let randomYMax = _curveSeverity || _edgePadding;
        // random 1 / -1
        let randomYDir = Math.ceil( (Math.random() - .5) * 2 ) < 1 ? -1 : 1;
        // random number 0 / 0.5
        let randomAX = Math.random() * (0.25 - 0.15) + 0.15;
        // random number 0.5 / 1
        let randomBX = Math.random() * (0.85 - 0.75) + 0.75;
        // random number 16 / 32
        let randomY = Math.floor(Math.random() * (randomYMax - (randomYMax / 2)) +1) + (randomYMax / 2);
        let randomBY = Math.floor(Math.random() * randomYMax) + 1;

        // Start & End
        let startAt = { 
          x: _startX, 
          y: _lastCurve.curveY ? _lastCurve.curveY:randomY
        };
        let endAt = { 
          x: _endX,
          y: randomY
        };

        // Bezier-Handle Points
        let bezierA = {
          x: _lastCurve.handleX ? (_startX + _lastCurve.handleX):(length * randomAX),
          y: _lastCurve.handleY ? (_lastCurve.curveY + _lastCurve.handleY):randomY
        };

        let bezierB = {
          x: _startX + (length * randomBX.toFixed(2)), 
          y: randomBY
        };
        
        let passOn = {
          handleX: endAt.x - bezierB.x,
          handleY: endAt.y - bezierB.y,
          curveY: endAt.y
        };

        if (_debug) {
          // draw a curve right in the middle
          _ctx.beginPath();
          _ctx.setLineDash([]);
          _ctx.strokeStyle = '#000000'
          _ctx.moveTo(startAt.x, startAt.y);
          // the curve!
          _ctx.bezierCurveTo(
            bezierA.x, bezierA.y, // bezier point a
            bezierB.x, bezierB.y, // bezier point b
            endAt.x, endAt.y // endpoint
          );
          _ctx.stroke();
          _ctx.closePath();

          // draw the line from start, to the bezier points and to the end
          _ctx.beginPath();
          _ctx.strokeStyle = '#9e42f5';
          _ctx.setLineDash([4, 4]);
          _ctx.moveTo(startAt.x, startAt.y);
          _ctx.lineTo(bezierA.x, bezierA.y);
          _ctx.lineTo(bezierB.x, bezierB.y);
          _ctx.lineTo(endAt.x, endAt.y);
          _ctx.stroke();
          _ctx.closePath();

          // draw the bezier points as circles
          _ctx.beginPath();
          _ctx.fillStyle = '#ff0000';
          _ctx.arc(bezierA.x, bezierA.y, 4, 0, 2 * Math.PI);
          _ctx.fill();
          _ctx.closePath();

          _ctx.beginPath();
          _ctx.fillStyle = '#0000ff';
          _ctx.arc(bezierB.x, bezierB.y, 4, 0, 2 * Math.PI);
          _ctx.fill();
          _ctx.closePath();

        } else {
          // the curve!
          _ctx.bezierCurveTo(
            bezierA.x, bezierA.y, // bezier point a
            bezierB.x, bezierB.y, // bezier point b
            endAt.x, endAt.y // endpoint
          );
        }

        return passOn;
      }
      
      paint(ctx, geom, props) {
        // get values from custom properties
        const edgePadding = props.get('--rough-edge-padding').value;
        const debug = props.get('--rough-edge-debug').value;
        const curveSeverity = props.get('--rough-edge-severity').value;
        const segmentCustomLength = props.get('--rough-edge-segment-length').value;
        const maxSegments = props.get('--rough-edge-max-segments').value;
        const background = props.get('--rough-edge-background').toString();

        // Segments - determines, how many individual beziercurves will be drawn, per default, grows with base-length,  unless a fixed number of segments is determined
        const segmentBaseLength = segmentCustomLength || 100;
        const segments = maxSegments || Math.floor(geom.width / segmentBaseLength);
        const segmentLength = geom.width / segments;
       
        const curvePosition = edgePadding;
        const firstCurvePosition = Math.floor(Math.random() * (curveSeverity || curvePosition - (0)) +1);
        
        let lastCurve = {
          handleX: null,
          handleY: null,
          curveY: firstCurvePosition
        }
        
        if (!debug) {
          // draw the curves, along the top edge
          ctx.beginPath();
          ctx.fillStyle = background;
          ctx.moveTo(0, firstCurvePosition);
          // draw the curves
          for (let i = 0; i <= segments; i++) {
            let segmentX = segmentLength * i;
            lastCurve = this.drawCurve(ctx, curvePosition, edgePadding, segmentX, segmentX + segmentLength, lastCurve, curveSeverity, false);
          }
          ctx.lineTo(geom.width, lastCurve.curveY);
          ctx.lineTo(geom.width, geom.height);
          ctx.lineTo(0, geom.height);
          ctx.lineTo(0, firstCurvePosition);
          ctx.closePath();
          ctx.fill();
        } else {
          // draw the box
          ctx.beginPath();
          ctx.moveTo(0,0);
          ctx.lineTo(geom.width, 0);
          ctx.lineTo(geom.width, geom.height);
          ctx.lineTo(0, geom.height);
          ctx.lineTo(0, 0);
          ctx.stroke();
          ctx.closePath();
          
          // draw the curves
          for (let i = 0; i <= segments; i++) {
            let segmentX = segmentLength * i;
            lastCurve = this.drawCurve(ctx, curvePosition, edgePadding, segmentX, segmentX + segmentLength, lastCurve, curveSeverity, true);
          }
          
          // separate each segment with a vertical line
          for (let i = 1; i < segments; i++) {
            let segmentX = segmentLength * i;
            ctx.beginPath(); 
            ctx.strokeStyle = '#0000ff';
            ctx.setLineDash([4, 4]);
            ctx.moveTo(segmentX, 0);
            ctx.lineTo(segmentX, geom.height);
            ctx.stroke();
            ctx.closePath();
          }

          // draw some orientation lines, for the middle-line and their top/bottom areas in which they can move
          ctx.beginPath();
          ctx.setLineDash([4, 4]);
          ctx.moveTo(0, curvePosition);
          ctx.lineTo(geom.width, curvePosition);
          ctx.strokeStyle = '#7c400f' ;
          ctx.stroke();
          ctx.closePath();
        }
      }
    }
  );
}