import mitt from 'mitt'
import {
  text,
  table,
  compass
} from './shape'
import Layer from './editCAD/Layer'
import { history } from './editCAD/History/History.js'

const toStore = (refs) => {
  return {
    bgImage: refs.baseMap?.data || null,
    shapes: refs.shapes.map(shape => shape.data)
  }
}

export const create = (store, canvas) => {
  const refs = {
    ctx: canvas.getContext('2d'),
    bus: mitt(),
    shapes: [],
    baseMap: null
  }

  const layer = new Layer()
  layer.start(canvas, store)
  layer.uiControl.bus.on('showAttribute', ({type, value: data}) => {
    const shape = { 
      data: { type }, 
      delete: () => {
        layer.uiControl.clearUI()
        layer.uiControl.setAttributes(type, 'delete')
      }
    }
    const update = (newData) => {
      layer.uiControl.setAttributes(type, 'update', newData)
    }
    switch (type) {
      case table: {
        data = data || [
          { width: 160, height: 60, value: '', colIndex: 0, rowIndex: 0 },
          { width: 160, height: 60, value: '', colIndex: 1, rowIndex: 0 },
        ]
        shape.data.content = data
        shape.setContent = (newData) => {
          shape.data.content = newData
          update(newData)
        }
        break;
      }
      case text: {
        data = data || ''
        shape.data.text = data
        shape.setText = (newData) => {
          shape.data.text = newData
          update(newData)
        }
        break;
      }
      case compass: {
        data = data || 0
        shape.data.rotate = 0
        shape.setRotate = (newData) => {
          console.log(newData)
          shape.data.rotate = newData
          update(newData)
        }
      }
    }
    console.log(shape)
    refs.bus.emit('selectShape', shape)
  })
  layer.uiControl.bus.on('hideAttribute', () => refs.bus.emit('selectShape', null))
  history.bus.on('undoAvailable', availabe => refs.bus.emit('backDisabled', !availabe))
  history.bus.on('redoAvailable', availabe => refs.bus.emit('forwardDisabled', !availabe))

  setTimeout(() => {
    // layer.uiControl.bus.emit('showAttribute', { type: compass, data: 0 })
    // history.bus.emit('undoAvailable', true)
    // history.bus.emit('redoAvailable', true)
  }, 100)

  const board = {
    bus: refs.bus,
    el: canvas,
    getCurrentStore:() => ({ ...store, ...toStore(refs) }),
    drawStore(newStore) {
      refs.ctx.clearRect(0,0, canvas.width, canvas.height)
      refs.shapes = []
      refs.baseMap = null
      generateRefs(newStore)
    },
    getStore() {
      return store
    },
    unSelectShape() {
      layer.uiControl.clearUI()
    },
    readyAddShape(shapeType, onFine) {
      layer.uiControl.selectUI = shapeType
      layer.uiControl.updateEventNameForSelectUI()
      const finePack = () => {
        layer.uiControl.bus.off('hideUI', finePack)
        onFine()
      }
      layer.uiControl.bus.on('hideUI', finePack)
    },
    back() {
      history.handleUndo()
    },
    forward() {
      history.handleRedo()
    },
    setImage(url) {
      refs.baseMap.changeImage(url)
      refs.bus.emit('storeChange')
    },
    export() {
      return new Promise(resolve => canvas.toBlob(resolve))
    },
    destroy() {
    }
  }

  return board
}

export * from './shape'

export default create