import { onBeforeUnmount, ref } from 'vue'
import type { Ref } from 'vue'

export const useStartNavi = (shop: Ref<Shop>, currentFloor: Ref<CurrentFloor>, setPauseRefFn?: () => void) => {
  const pathShopList = ref<Shop[]>([])
  const directionInfo = ref({})

  startNavi({ ...shop.value })

  onBeforeUnmount(() => {
    window.Map_QM.showFloor(currentFloor.value.floorOrder)
  })

  //导航动画
  function startNavi({ floorOrder, yaxis }: { floorOrder: number; yaxis: number | string }) {
    try {
      window.Map_QM.pathNode({ floor: floorOrder, node: yaxis }, backPathArray)
    } catch (error) {
      console.log('error: ', error)
    }
  }

  //店铺经过相关数据
  function backPathArray({ direction, wayList }: { direction: Direction; wayList: Shop[] }) {
    setPauseRefFn && setPauseRefFn()
    directionInfo.value = generateDirection(direction)
    pathShopList.value = wayList ?? []
  }

  function generateDirection(text: Direction) {
    switch (text) {
      case '向前出发':
        return {
          text: text, //方向信息
          textEn: 'Move forward',
          icon: require('@/assets/images/nav/big_up.svg'), //大的方向箭头
          passIcon: require('@/assets/images/nav/up_thumb.svg'), //经过店铺时的那个小箭头
          class: 'animate__fadeInUp up' //动画样式
        }

      case '向后出发':
        return {
          text: text,
          textEn: 'Departure backwards',
          icon: require('@/assets/images/nav/big_down.svg'),
          passIcon: require('@/assets/images/nav/down_thumb.svg'),
          class: 'animate__fadeInDown down'
        }

      case '向左出发':
        return {
          text: text,
          textEn: 'Departure to the left',
          icon: require('@/assets/images/nav/big_left.svg'),
          passIcon: require('@/assets/images/nav/left_thumb.svg'),
          class: 'animate__fadeInRight left'
        }

      case '向右出发':
        return {
          text: text,
          textEn: 'Departure to the right',
          icon: require('@/assets/images/nav/big_right.svg'),
          passIcon: require('@/assets/images/nav/right_thumb.svg'),
          class: 'animate__fadeInLeft right'
        }
      default:
        return {
          text: '',
          textEn: '',
          icon: '',
          class: '',
          passIcon: ''
        }
    }
  }

  return { directionInfo, pathShopList, backPathArray, startNavi }
}