import * as createjs from "createjs-module"
import { Control } from "../types"

export type DragLayerEvent = {
  type: "select" | "selectSame" | "resize" | "move"
  isAdd?: boolean
  stageX?: number
  stageY?: number
  movementX?: number
  movementY?: number
  dragerLayer: DragLayer
}

export type SelectState = "select" | "mulityselect" | "noselect"

export class DragLayer extends createjs.Container {
  dragBox = new createjs.Shape()
  decorationLayer = new createjs.Container()
  dragHandler = new createjs.Shape()
  moveBeginX: number = 0
  moveBeginY: number = 0
  borderPadding: number = 3
  selectState: SelectState = "noselect"
  border = new createjs.Shape()
  constructor(public readonly assControl: Control) {
    super()
    this.dragBox.cursor = "move"
    this.dragHandler.cursor = "se-resize"
    this.dragBox.alpha = 0.01
    this.dragBox.on("mousedown", (e2: unknown) => {
      const e = e2 as createjs.MouseEvent
      this.moveBeginX = e.stageX
      this.moveBeginY = e.stageY

      const evt: DragLayerEvent = { type: "select", dragerLayer: this, isAdd: !!e.nativeEvent.ctrlKey }
      this.dispatchEvent(evt)
    })
    this.dragBox.on("dblclick", (e2: unknown) => {
      const e = e2 as createjs.MouseEvent
      const evt: DragLayerEvent = { type: "selectSame", dragerLayer: this, isAdd: !!e.nativeEvent.ctrlKey }
      this.dispatchEvent(evt)
    })
    this.dragBox.on("pressmove", (e2: unknown) => {
      const e = e2 as createjs.MouseEvent
      const movementX = e.stageX - this.moveBeginX
      const movementY = e.stageY - this.moveBeginY
      this.moveBeginX = e.stageX
      this.moveBeginY = e.stageY
      const evt: DragLayerEvent = { type: "move", dragerLayer: this, movementX, movementY }
      this.dispatchEvent(evt)
    })

    this.dragHandler.on("pressmove", (e: object) => {
      const e2 = e as { stageX: number; stageY: number }
      const evt: DragLayerEvent = { type: "resize", dragerLayer: this, stageX: e2.stageX, stageY: e2.stageY }
      this.decorationLayer.visible = true
      this.dispatchEvent(evt)
    })
    this.dragHandler.on("pressup", () => {
      this.decorationLayer.visible = false
    })

    this.addChild(this.assControl.getDisplayObject())
    this.addChild(this.dragBox)
    this.addChild(this.border)
    this.addChild(this.decorationLayer)
    this.addChild(this.dragHandler)
    this.border.visible = false
    this.dragHandler.visible = false
    this.decorationLayer.visible = false
    this.resize(this.assControl.size.width, this.assControl.size.height)
  }
  resize(width: number, height: number) {
    this.assControl.size.width = width
    this.assControl.size.height = height
    this.reDraw()
  }

  reDraw() {
    this.assControl.reDraw()
    this.drawDragBox()
    this.drawBorder()
    this.drawDecoration()
    this.drawDragHandler()
  }

  drawDragBox() {
    const { width, height } = this.assControl.size
    this.dragBox.graphics.clear()
    this.dragBox.graphics.beginFill("#cccccc").drawRect(0, 0, width, height)
  }

  drawBorder() {
    const padding = this.borderPadding
    const { width, height } = this.assControl.size
    const g = this.border.graphics
    g.clear()

    if (this.selectState === "mulityselect") {
      g.sd([5, 2], 0)
    }
    g.ss(2)
      .s("#666")
      .dr(-padding, -padding, width + padding * 2, height + padding * 2)
  }

  drawDragHandler() {
    const { width, height } = this.assControl.size
    const padding = this.borderPadding
    const twidth = 12
    const g = this.dragHandler.graphics
    g.clear()

    g.f("#666")
    g.mt(width + padding - twidth, height + padding)
    g.lt(width + padding, height + padding - twidth)
    g.lt(width + padding, height + padding)
    g.cp()
  }
  createMeasuring(length: number, headwidth: number) {
    length = parseInt(length.toFixed(0))
    const c = new createjs.Container()

    //var headwidth=10;
    const s = new createjs.Shape()
    const g = s.graphics

    g.ss(1)
      .s("red")
      .mt(0, -headwidth / 2)
      .lt(0, headwidth / 2)
    g.mt(0, 0).lt(length, 0)
    g.mt(length, -headwidth / 2).lt(length, headwidth / 2)

    const text = new createjs.Text("" + length, "10px Arial", "#ff7700")
    text.textAlign = "center"
    text.x = length / 2
    text.y = 0
    text.textBaseline = "middle"

    const bounds = text.getBounds()
    g.es()
      .f("#fff")
      .drawRect(text.x - bounds.width / 2, -bounds.height / 2, bounds.width, bounds.height)

    c.addChild(s)
    c.addChild(text)

    return c
  }

  drawDecoration() {
    const padding = this.borderPadding
    const margin = 3
    const headwidth = 10
    this.decorationLayer.removeAllChildren()
    if (this.assControl.size.width > 30) {
      const hc = this.createMeasuring(this.assControl.size.width, headwidth)
      hc.y = this.assControl.size.height + margin + padding + headwidth / 2

      this.decorationLayer.addChild(hc)
    }

    if (this.assControl.size.height > 30) {
      const hc = this.createMeasuring(this.assControl.size.height, headwidth)
      hc.x = this.assControl.size.width + margin + padding + headwidth / 2
      hc.rotation = 90

      this.decorationLayer.addChild(hc)
    }
  }

  setSelectState(selectState: SelectState) {
    if (this.assControl.isLocked) {
      this.selectState = "noselect"
      // return;
    } else {
      if (this.selectState === selectState) return
      this.selectState = selectState
    }

    switch (this.selectState) {
      case "select":
        this.border.visible = true
        this.dragHandler.visible = true
        break
      case "mulityselect":
        this.border.visible = true
        this.dragHandler.visible = true
        this.decorationLayer.visible = false
        break
      case "noselect":
        this.border.visible = false
        this.dragHandler.visible = false
        this.decorationLayer.visible = false
        break
    }

    this.drawBorder()
  }
}