import { renderIcon } from '@/utils/webutils.ts'
import { defineComponent, markRaw } from 'vue'
import Viewport from '@/designer/Viewport.ts'

export default defineComponent({
  name: 'Model2DEditor',
  data() {
    const viewport = new Viewport(worldModel)

    return {
      isReady: false,
      viewport: viewport,
      currentFloor: '',
      searchKeyword: ''
    }
  },
  mounted() {
    window['editor'] = this
  },
  beforeMount() {
    this.initByFloor('')
    delete window['editor']
  },
  methods: {
    renderIcon,
    initByFloor(floor) {
      this.isReady = false
      const viewportOrigin = this.viewport
      if (viewportOrigin && viewportOrigin.state.isReady) {
        viewportOrigin.destroy()
      }

      delete window['editor']
      delete window['viewport']
      delete window['scene']
      delete window['renderer']
      delete window['camera']
      delete window['renderer']
      delete window['controls']

      if (!floor) {
        return
      }

      const viewerDom = this.$refs.canvasContainer
      const viewport = markRaw(new Viewport(worldModel))
      this.viewport = viewport

      viewport.initThree(viewerDom, floor)

      window['viewport'] = viewport
      window['scene'] = viewport.scene
      window['renderer'] = viewport.renderer
      window['camera'] = viewport.camera
      window['renderer'] = viewport.renderer
      window['controls'] = viewport.controls

      viewerDom.focus()
      this.isReady = true
    }
  },
  watch: {
    currentFloor: {
      handler(newVal, oldVal) {
        const floor = newVal
        this.$nextTick(() => {
          console.log('floor changed', floor)
          this.initByFloor(newVal)
        })
      }
    }
  },
  computed: {
    /**
     * @returns {ViewportState|{}}
     */
    state() {
      return this.viewport.state
    },
    allLevels() {
      return worldModel.allLevels
    }
  }
})