type LabelMap = Record<
  string,
  {
    name: string
    color: string
  }
>

const labelMap: LabelMap = {
  '1': { name: 'Hello', color: 'red' },
  '2': { name: 'Thank You', color: 'yellow' },
  '3': { name: 'I Love You', color: 'lime' },
  '4': { name: 'Yes', color: 'blue' },
  '5': { name: 'No', color: 'purple' },
}

export const drawRect = (
  boxes: number[][],
  classes: number[],
  scores: number[],
  threshold: number,
  imgWidth: number,
  imgHeight: number,
  ctx: CanvasRenderingContext2D,
): void => {
  for (let i = 0; i < boxes.length; i++) {
    if (boxes[i] && classes[i] && scores[i] > threshold) {
      const [y, x, height, width] = boxes[i]
      const text = classes[i].toString()

      if (labelMap[text]) {
        ctx.strokeStyle = labelMap[text].color
        ctx.lineWidth = 10
        ctx.fillStyle = 'white'
        ctx.font = '30px Arial'

        ctx.beginPath()
        ctx.fillText(
          `${labelMap[text].name} - ${Math.round(scores[i] * 100) / 100}`,
          x * imgWidth,
          y * imgHeight - 10,
        )
        ctx.rect(x * imgWidth, y * imgHeight, (width * imgWidth) / 2, (height * imgHeight) / 1.5)
        ctx.stroke()
      }
    }
  }
}
