import * as createjs from "createjs-module"

import SelectBorder from "./SelectBorder"
import { CommApi } from "../types"

export type BoxSelectEvent = {
  type: "boxSelect"
  x1: number
  x2: number
  y1: number
  y2: number
  isAdd: boolean
}

export default class BackgroundLayer extends createjs.Container {
  api: CommApi
  backgroundImage: createjs.Bitmap | null = null
  width: number
  height: number
  imageId: string | null = null
  selectBorder: SelectBorder
  constructor(width: number, height: number, api: CommApi) {
    super()
    this.width = width
    this.height = height
    this.api = api
    const backColor = new createjs.Shape()
    backColor.graphics.beginFill("#fff").drawRect(0, 0, width, height)
    this.addChild(backColor)

    this.selectBorder = new SelectBorder()
    this.on("mousedown", (e2: unknown) => {
      const e = e2 as createjs.MouseEvent
      this.selectBorder.setPoint1(e.stageX, e.stageY)
    })

    //@ts-expect-error MouseEvent
    this.on("pressmove", (e: createjs.MouseEvent) => {
      this.selectBorder.setPoint2(e.stageX, e.stageY)
    })

    //@ts-expect-error MouseEvent
    this.on("pressup", (e: createjs.MouseEvent) => {
      const evt: BoxSelectEvent = {
        type: "boxSelect",
        x1: this.selectBorder.x1,
        x2: this.selectBorder.x2,
        y1: this.selectBorder.y1,
        y2: this.selectBorder.y2,
        isAdd: !!e.nativeEvent.ctrlKey,
      }
      this.dispatchEvent(evt)
      this.selectBorder.end()
    })
  }

  changeSize(width: number, height: number) {
    this.width = width
    this.height = height
    if (this.imageId) {
      this.setBackgroundImage(this.imageId)
    }
  }

  setBackgroundImage(imageId: string) {
    this.imageId = imageId
    this.api.getImg(imageId).then(img => {
      if (this.backgroundImage) {
        this.removeChild(this.backgroundImage)
      }
      this.backgroundImage = new createjs.Bitmap(img)

      //  console.log(this.width, img.width, img.naturalWidth, this.height, img.height, img.naturalHeight);
      if (img.width > 0) {
        this.backgroundImage.scaleX = this.width / img.width
        this.backgroundImage.scaleY = this.height / img.height
      }

      this.addChild(this.backgroundImage)
    })
  }
}