import { canvasHelper } from '../CanvasHelper'
import { Component } from '../component/Component'
import { Rect } from '../component/Rect'
import { FontWeight, TextAlign, TextBaseline, Text } from '../component/Text'
import { font } from '../Constant'

export function getTextWithBackground ({
  txt = '在此处输入文字！',
  position = { x: 100, y: 100 },
  fontSize = 24,
  fontWeight = 'bold' as FontWeight,
  textAlign = 'right' as TextAlign,
  textBaseline = 'top' as TextBaseline,
  foregroundStyle = '#1e1e1e',
  backgroundStyle = '#fff',
  padding = { top: 5, bottom: 0, left: 5, right: 5 },
}): Component {
  const res = new Component({
    key: 'text-with-background',
    position,
  })
  const text = new Text({
    key: 'text',
    text: txt,
    position: { x: padding.left, y: padding.top },
    fillStyle: foregroundStyle,
    font,
    fontSize,
    textBaseline,
    fontWeight,
    textAlign,
  })
  const width = canvasHelper.measure(text)?.width
  const rect = new Rect({
    key: 'text-with-background-bg',
    clip: true,
    shape: {
      width: width + text.position.x + padding.left + padding.right,
      height: fontSize + padding.top + padding.bottom,
    },
    fillStyle: backgroundStyle,
  })
  if (textAlign === 'right') {
    text.position.x += width
  }
  res.center = { x: rect.shape.width / 2, y: rect.shape.height / 2 }
  rect.children.push(text)
  res.children.push(rect)
  return res
}