import { ref, watch } from 'vue'
import { useEventListener } from '@vant/use'
import runtime, * as RuntimeUtils from '/src/pages/detail/runtime'

export const useMenu = () => {
  const show = ref<boolean>(true)
  useEventListener(
    'click',
    (evt: Event) => {
      // @ts-ignore
      const paths = (evt.path || evt.composedPath()) as HTMLElement[]
      const firstPathElement = paths[0]
      if (firstPathElement) {
        const isNote = firstPathElement.dataset.id && firstPathElement.dataset.id.indexOf('auto') > -1
        const isButton = paths.find((ele) => {
          return ele.tagName === 'BUTTON' || ele.getAttribute?.('role') === 'button'
        })
        if (isNote || isButton) {
          return
        }
      }
      show.value = !show.value
    },
    { target: document.body.querySelector('#colexiu-detail-music-sheet') as HTMLElement }
  )

  watch(
    () => runtime.playState,
    (prevRuntime, newRuntime) => {
      // console.log('newRuntime', newRuntime)
      let tmpStatus = newRuntime
      if (tmpStatus === 'suspend') {
        tmpStatus = 'pause'
      }
      show.value = tmpStatus !== 'pause'
    }
  )

  return [show]
}
