// 重构代码

import { Application, Assets } from 'pixi.js'
import 'pixi.js/unsafe-eval'
import '@pixi/spine-pixi'
import { Spine, TrackEntry } from '@pixi/spine-pixi'
import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue'
import useRouterStore from '@/useRouterStore'
import useSearchStore from '@/layout/header/search/useSearchStore'
import useLayoutStore from '@/layout/useLayoutStore'

const stageStrList = [
  'dazhaohu',
  'xunhuan',
  'yemianbuhuoyue',
  'dahulu',
  'shuixing',
  'duxin',
  'aixin',
  'dianji',
  'xiaoxitixing'
]

const load = async (stageStr: string) => {
  await Assets.load({ alias: stageStr, src: `/fox/xiaohuli_${stageStr}.json` })
  await Assets.load({
    alias: stageStr + '_atlas',
    src: `/fox/xiaohuli_${stageStr}.atlas`
  })
}

export default defineComponent(() => {
  let container: HTMLCanvasElement | null = null
  const app = new Application()
  let spine: Spine | null = null
  let track: TrackEntry | null = null
  const sleep = ref(false)
  const run = (stageStr: string) => {
    if (spine) {
      app.stage.removeChild(spine)
      spine.destroy()
    }
    spine = Spine.from({ skeleton: stageStr, atlas: stageStr + '_atlas' })
    track = spine.state.setAnimation(0, stageStr, stageStr === 'xunhuan' || stageStr === 'dahulu')
    spine.x = 80
    spine.y = 200
    spine.scale = 0.2
    app.stage.addChild(spine)
    const handle = () => {
      if (track?.isComplete()) {
        app.ticker.remove(handle)
        if (stageStr !== 'xunhuan' && stageStr !== 'dahulu') {
          run(sleep.value ? 'dahulu' : 'xunhuan')
        }
      }
    }
    app.ticker.add(handle)
  }
  watch(sleep, (val) => {
    if (val) {
      run('yemianbuhuoyue')
    } else {
      run('shuixing')
    }
  })
  const handle = () => {
    if (document.visibilityState === 'visible') {
      sleep.value = false
      run('shuixing')
    }
  }
  let it: any = 0
  const handleMove = () => {
    clearTimeout(it)
    sleep.value = false
    it = setTimeout(() => {
      sleep.value = true
    }, 10000)
  }
  onMounted(async () => {
    if (!container) return
    await app.init({
      width: 250,
      height: 195,
      backgroundAlpha: 0,
      resolution: window.devicePixelRatio || 1,
      autoDensity: true,
      antialias: true,
      background: 'transparent',
      backgroundColor: 'transparent',
      canvas: container
    })
    for (const str of stageStrList) {
      await load(str)
    }
    watch(
      () => layout.currentMode,
      () => {
        run('dazhaohu')
      },
      { immediate: true }
    )
    window.addEventListener('visibilitychange', handle)
    window.addEventListener('mousemove', handleMove)
  })
  onUnmounted(() => {
    window.removeEventListener('visibilitychange', handle)
    window.removeEventListener('mousemove', handleMove)
  })

  const router = useRouterStore()
  const search = useSearchStore()
  const layout = useLayoutStore()

  watch(
    () => [router.path, search.focus],
    ([a, b]) => {
      if (a || b) {
        run('duxin')
      }
    }
  )
  return () => (
    <canvas
      ref={(el) => (container = el as any)}
      onMouseenter={() => {
        run('dianji')
      }}
      onClick={() => {
        run('aixin')
      }}
    />
  )
})