export abstract class Drawing
{
  width: number
  height: number

  scale: number = 1
  abstract drawPath(path: DrawPathContext, option: DrawLineOption)

  abstract drawLine(
    x0: number,
    y0: number,
    x1: number,
    y1: number,
    option: DrawLineOption,
  )
  abstract drawRect(
    x: number,
    y: number,
    width: number,
    height: number,
    option: DrawRectOption,
  )
  abstract drawLinePolygon(points: Array<any>, option: DrawLinePolygonOption)
  abstract drawText(text: string, x: number, y: number, option: DrawTextOption)
  abstract drawForeignObjectText(
    text: string,
    x: number,
    y: number,
    option: DrawTextOption,
  )
  abstract drawImage(
    source: CanvasImageSource,
    x: number,
    y: number,
    width: number,
    height: number,
    option: DrawImageOption,
    border: number,
  ): Promise<any>

  abstract clearAll()

  abstract toHTML(): string
}

export class BaseDrawOption
{
  lineWidth: number = 1
  strokeStyle: string
}

interface IDrawPath
{
  method: string
  args: number[]
}
export class DrawPathContext
{
  data: Array<IDrawPath> = []

  moveTo(x: number, y: number)
  {
    this.data.push({ method: 'M', args: [x, y] })

    return this
  }

  lineTo(x: number, y: number)
  {
    this.data.push({ method: 'L', args: [x, y] })
    return this
  }
}

export class DrawLineOption extends BaseDrawOption { }
export class DrawRectOption extends BaseDrawOption
{
  fillStyle: string
}
export class DrawImageOption extends BaseDrawOption { }
export class DrawLinePolygonOption extends BaseDrawOption
{
  isFill: boolean = true
  fillStyle: string = 'rgb(0,0,0)'
}

export type DrawTextBaseLnie = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top'
export type DrawTextAlign = 'start' | 'center' | 'right'
export class DrawTextOption
{
  maxWidth?: number
  textAlign: DrawTextAlign = 'center'
  textBaseline: DrawTextBaseLnie = 'middle'
  fillStyle: string = 'rgb(0,0,0)'
  fontSize: string = '12'
  fontWeight: string = '400'
  fontFamily: string = '宋体'
}