import canvasSketch from "canvas-sketch";
import drawRoundedSegment from './drawRoundedSegment.js';

const settings = {
  dimensions: [2048, 2048],
  animate: true,
};

const sketch = () => {
  return ({ context, width, height, time }) => {
    context.fillStyle = "white";
    context.fillRect(0, 0, width, height);

    // create a line segment
    const p = [
      Math.sin(time) * 0.25 * width + width / 2,
      Math.cos(Math.sin(time * 2) + time) * 0.25 * height + height / 2,
    ];
    const r = 0.15 * width;
    const angle = 0.2 + time * 1;
    const [a, b] = [-1, 1].map((d) => [
      p[0] + Math.cos(angle) * d * r,
      p[1] + Math.sin(angle) * d * r,
    ]);

    const lineWidth = width * 0.1 * (0.05 + Math.sin(time * 2) * 0.5 + 0.5);

    // test native canvas approach
    context.beginPath();
    context.lineTo(...a);
    context.lineTo(...b);
    context.strokeStyle = "lightGray";
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.stroke();

    const points = drawRoundedSegment(a, b, lineWidth, 32, 1);
    context.beginPath();
    points.forEach((p) => context.lineTo(...p));
    context.lineWidth = width * 0.002;
    context.strokeStyle = "blue";
    context.closePath();
    context.lineJoin = "round";
    context.fillStyle = "red";
    context.stroke();
  };
};

canvasSketch(sketch, settings);