import { CanvasRegion } from './CanvasRenderer';

export type RectRenderParameters = {
  startBeats: number;
  endBeats: number;
  pxPerBeat: number;
  scrollX: number;
  y: number;
  height: number;
  color: string;
  text?: string;
  minWidth?: number;
  textAlign?: CanvasTextAlign;
  borderWidth?: number;
  borderColor?: string;
  onMouseDown?: (e: MouseEvent) => void;
  hoverCursor?: string;
  dragCursor?: string;
  cornerRadius?: number;
};
export default function makeRoundedRectRegion(
  params: RectRenderParameters
): CanvasRegion {
  const x = params.startBeats * params.pxPerBeat - params.scrollX + 1;
  const width = Math.max(
    params.minWidth ?? 0,
    (params.endBeats - params.startBeats) * params.pxPerBeat - 1
  );
  const cornerRadius = params.cornerRadius || 6;
  return {
    touchTarget: params.onMouseDown
      ? {
          bounds: {
            top: params.y,
            left: x,
            right: x + width,
            bottom: params.y + params.height,
          },
          onMouseDown: params.onMouseDown,
          hoverCursor: params.hoverCursor,
          dragCursor: params.dragCursor,
        }
      : undefined,
    render: (ctx: CanvasRenderingContext2D) => {
      if (params.borderWidth && params.borderColor) {
        ctx.fillStyle = params.borderColor;
        ctx.beginPath();
        ctx.roundRect(
          x - params.borderWidth,
          params.y - params.borderWidth,
          width + 2 * params.borderWidth,
          params.height + 2 * params.borderWidth,
          cornerRadius + params.borderWidth
        );
        ctx.closePath();
        ctx.fill();
      }

      ctx.fillStyle = params.color;
      ctx.beginPath();
      ctx.roundRect(x, params.y, width, params.height, cornerRadius);
      ctx.closePath();
      ctx.fill();

      if (params.text) {
        const maxChars = Math.floor((width - 20) / 6.3);
        let truncatedText = params.text;
        if (maxChars <= 0) {
          return;
        } else if (params.text.length > maxChars) {
          truncatedText = params.text.slice(0, maxChars - 1) + '…';
        }
        ctx.fillStyle = '#fff';
        ctx.font = '9px "Input Sans", monospace';
        ctx.textAlign = params.textAlign || 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText(
          truncatedText,
          params.textAlign === 'center' ? x + width / 2 : x + 10,
          params.y + params.height / 2 + 1
        );
      }
    },
  };
}