import { CanvasRegion } from './CanvasRenderer';

export default function makeBeatGridRegion({
  timelineStartBeats,
  timelineEndBeats,
  pxPerBeat,
  songEndBeats,
  beatsToCanvasPx,
  timelineWrapperRect,
}: {
  timelineStartBeats: number;
  timelineEndBeats: number;
  pxPerBeat: number;
  songEndBeats: number;
  beatsToCanvasPx: (beats: number) => number;
  timelineWrapperRect: DOMRect;
}): CanvasRegion {
  const minPxPerBar = 35;
  let beatsPerLine = 4;
  while (beatsPerLine * pxPerBeat < minPxPerBar) {
    beatsPerLine *= 2;
  }
  const barXs: number[] = [];
  for (
    let i = Math.max(
      0,
      Math.floor(timelineStartBeats / beatsPerLine) * beatsPerLine
    );
    i < Math.min(timelineEndBeats, songEndBeats);
    i += beatsPerLine
  ) {
    barXs.push(beatsToCanvasPx(i));
  }

  return {
    render: (ctx: CanvasRenderingContext2D) => {
      barXs.forEach((x) => {
        ctx.font = '12px "PP Neue Montreal", sans-serif';
        ctx.fillStyle = '#1a1a1b';
        ctx.fillRect(x, 0, 1, timelineWrapperRect.height);
      });
    },
  };
}