/**
 * 刻度尺绘制
 *
 * @param {*} canvas - canvas元素
 * @param {*} canvasStyleWidth - canvasStyleWidth宽度
 * @param {*} canvasStyleHeight - canvasStyleHeight高度
 * @param {*} direcotion - 标尺方向
 * @param {*} scale - 缩放比例
 * @param {*} scrollX - 滚动x
 * @param {*} scrollY - 滚动y
 * @param {*} originX - 原点x
 * @param {*} originY - 原点y
 *  */
export function drawScaleplate({
  canvas,
  canvasStyleWidth,
  canvasStyleHeight,
  direcotion,
  scale,
  scrollX,
  scrollY,
  originX,
  originY
}: {
  canvas: HTMLCanvasElement
  direcotion: 'horizontal' | 'vertical'
  canvasStyleWidth: number
  canvasStyleHeight: number
  scale: number
  scrollX: number
  scrollY: number
  originX: number
  originY: number
}) {
  const ctx = canvas.getContext('2d')
  if (!ctx) return

  // 计算出清晰canvas的原始宽度 = 样式宽度 * 屏幕倍率
  const drp = window.devicePixelRatio || 1
  canvas.width = canvasStyleWidth * drp
  canvas.height = canvasStyleHeight * drp
  ctx.setTransform(drp, 0, 0, drp, 0, 0)
  ctx.clearRect(0, 0, canvasStyleWidth, canvasStyleHeight)

  // 起始位置
  const hStartNum = (scrollX - originX) / scale
  const vStartNum = (scrollY - originY) / scale

  // 计算大刻度, 判断跟20 50 100 250 500 1000谁更接近用谁
  const tickSpacingOptions = [20, 50, 100, 250, 500, 1000]
  const maxTickNum = tickSpacingOptions.reduce((prev, curr) => {
    return Math.abs(curr - 100 / scale) < Math.abs(prev - 100 / scale) ? curr : prev
  })
  // 小刻度数
  const minTickNum = maxTickNum / 10
  // 计算最小刻度的距离
  const minTickSpacing = (maxTickNum / 10) * scale

  const maxLength = direcotion === 'horizontal' ? canvasStyleWidth : canvasStyleHeight
  // 记录起始刻度值
  let startNum = Math.round(direcotion === 'horizontal' ? hStartNum : vStartNum)
  // 计算起始刻度偏移量
  let startTickOffset = 0
  if (startNum % minTickNum !== 0) {
    startTickOffset += Math.abs(startNum % minTickNum) * scale
    startNum -= startNum % minTickNum
  }

  // 每间隔小刻度数就绘制一个刻度
  for (let tickSpacing = startTickOffset; tickSpacing < maxLength; tickSpacing += minTickSpacing) {
    // 如果当前为大刻度 需要展示数字
    if (startNum % maxTickNum === 0) {
      drawMaxTick(
        ctx,
        direcotion === 'horizontal' ? tickSpacing : 0,
        direcotion === 'horizontal' ? 0 : tickSpacing,
        startNum,
        direcotion
      )
    } else if (startNum % minTickNum === 0) {
      // 如果当前为小刻度
      drawMinTick(
        ctx,
        direcotion === 'horizontal' ? tickSpacing : 0,
        direcotion === 'horizontal' ? 0 : tickSpacing,
        direcotion
      )
    }
    startNum += minTickNum
  }
}

// 绘制大刻度
function drawMaxTick(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  num: number,
  direcotion: 'horizontal' | 'vertical'
) {
  ctx.beginPath()
  if (direcotion === 'horizontal') {
    ctx.moveTo(x + 0.5, 0)
    ctx.lineTo(x + 0.5, 20)
  } else {
    ctx.moveTo(0, y + 0.5)
    ctx.lineTo(20, y + 0.5)
  }
  ctx.strokeStyle = '#666'
  ctx.lineWidth = 1
  ctx.stroke()
  ctx.fillStyle = '#eee'
  ctx.font = '12px Arial'
  ctx.textBaseline = 'top'
  if (direcotion === 'horizontal') {
    ctx.fillText(num.toString(), x + 5, 1)
  } else {
    ctx.save()
    ctx.translate(1, y + 5)
    ctx.rotate(-Math.PI / 2)
    ctx.fillText(num.toString(), 0, 0)
    ctx.restore()
  }
}

// 绘制小刻度
function drawMinTick(
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  direcotion: 'horizontal' | 'vertical'
) {
  ctx.beginPath()
  if (direcotion === 'horizontal') {
    ctx.moveTo(x + 0.5, 12)
    ctx.lineTo(x + 0.5, 20)
  } else {
    ctx.moveTo(12, y + 0.5)
    ctx.lineTo(20, y + 0.5)
  }
  ctx.strokeStyle = '#666'
  ctx.lineWidth = 1
  ctx.stroke()
}
