import { useEffect, useRef } from "react";
import { sizeCanvas, paintStrokeDoc, strokeDocOf } from "./strokes.js";

export function DrawingLayer({ strokes, width, height, zIndex }) {
  const ref = useRef(null);
  useEffect(() => {
    const c = ref.current;
    if (!c) return;
    const { bw, bh } = sizeCanvas(c, width, height);
    paintStrokeDoc(c.getContext("2d"), strokeDocOf(strokes), bw, bh);
  }, [strokes, width, height]);
  return (
    <canvas
      ref={ref}
      style={{ position: "absolute", left: 0, top: 0, width: "100%", height, pointerEvents: "none", zIndex }}
    />
  );
}