export function keyframeTickSpacing(pixelsPerSecond) {
  if (pixelsPerSecond > 200) return { major: 0.25, minor: 0.0625 };
  if (pixelsPerSecond > 100) return { major: 0.5, minor: 0.125 };
  if (pixelsPerSecond < 10) return { major: 10, minor: 2.5 };
  if (pixelsPerSecond < 20) return { major: 5, minor: 1.25 };
  return { major: 1, minor: 0.25 };
}

export function drawKeyframeRulerCanvas({
  canvas, dpr, scroll, pixelsPerSecond, clipStart, clipDuration, formatTime, labelWidth = 100,
}) {
  const context = canvas.getContext('2d');
  const width = canvas.clientWidth;
  const height = 28;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  context.setTransform(dpr, 0, 0, dpr, 0, 0);
  context.clearRect(0, 0, width, height);
  context.fillStyle = 'rgba(255,255,255,0.03)';
  context.fillRect(0, 0, labelWidth, height);
  context.strokeStyle = 'rgba(255,255,255,0.1)';
  context.beginPath();
  context.moveTo(labelWidth, 0);
  context.lineTo(labelWidth, height);
  context.stroke();
  const { major, minor } = keyframeTickSpacing(pixelsPerSecond);
  context.strokeStyle = 'rgba(255,255,255,0.18)';
  context.fillStyle = 'rgba(255,255,255,0.65)';
  context.font = '11px monospace';
  const start = Math.floor(scroll / pixelsPerSecond / major) * major;
  for (let time = Math.max(0, start); time <= clipDuration + major; time += minor) {
    const x = labelWidth + time * pixelsPerSecond - scroll;
    if (x < labelWidth || x > width) continue;
    const isMajor = Math.abs(time / major - Math.round(time / major)) < 0.001;
    context.beginPath();
    context.moveTo(x, height);
    context.lineTo(x, height - (isMajor ? 14 : 7));
    context.stroke();
    if (isMajor) context.fillText(formatTime(clipStart + time), x + 3, 12);
  }
}

export function drawKeyframeWaveformCanvas({
  canvas, dpr, scroll, pixelsPerSecond, clipStart, clipDuration,
  waveform, getPeakForTimeRange, labelWidth = 100,
}) {
  const context = canvas.getContext('2d');
  const width = canvas.clientWidth;
  const height = 50;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  context.setTransform(dpr, 0, 0, dpr, 0, 0);
  context.clearRect(0, 0, width, height);
  context.fillStyle = 'rgba(0,0,0,0.35)';
  context.fillRect(0, 0, width, height);
  context.fillStyle = 'rgba(255,255,255,0.03)';
  context.fillRect(0, 0, labelWidth, height);
  context.strokeStyle = 'rgba(255,255,255,0.1)';
  context.beginPath();
  context.moveTo(labelWidth, 0);
  context.lineTo(labelWidth, height);
  context.stroke();
  if (!waveform.peaks && !waveform.rawSamples) return;
  const middle = height / 2;
  context.strokeStyle = 'rgba(120,180,255,0.7)';
  for (let x = labelWidth; x < width; x += 1) {
    const localTime = (x - labelWidth + scroll) / pixelsPerSecond;
    if (localTime < 0 || localTime > clipDuration) continue;
    const time = clipStart + localTime;
    const amplitude = waveform.rawSamples
      ? getPeakForTimeRange(time, time + 1 / pixelsPerSecond)
      : waveform.peaks[Math.floor(Math.min(0.999999, Math.max(0, time / waveform.duration)) * waveform.peaks.length)] || 0;
    const y = amplitude * (height * 0.4);
    context.beginPath();
    context.moveTo(x + 0.5, middle - y);
    context.lineTo(x + 0.5, middle + y);
    context.stroke();
  }
}
