import { ref, shallowRef, watch, toRaw, nextTick, onBeforeUnmount, type ShallowRef } from 'vue'

/**
 * @param {array} totalList 分页数据源
 * @param {*} scroll 滚动组件的实例
 * @return {*} { scrollEnd, pageList, loaded }
 */
type PageList = { name: string; shopList: Shop[] }
export const usePage = (totalList: PageList[], scroll: ShallowRef<any>) => {
  if (typeof Worker === 'undefined') {
    alert('抱歉,当前运行环境不支持Web Worker API, 请升级浏览器版本')
  }
  const pageList = shallowRef<PageList[]>([]) //用于UI渲染的列表
  const loaded = ref(false)
  const worker = ref<Worker>()
  worker.value = new Worker('./static/worker/page.worker.js')
  worker.value.onmessage = e => {
    pageList.value = e.data.pageList
    loaded.value = e.data.loaded
    if (e.data.refresh) {
      nextTick(() => {
        scroll.value?.scrollTo?.(0, 0, 100)
      })
    }
  }

  function scrollEnd() {
    worker.value?.postMessage('scrollEnd')
  }
  watch(
    totalList,
    newVal => {
      const rawList = newVal.map(item => toRaw(item))
      worker.value?.postMessage(rawList)
    },
    {
      immediate: true
    }
  )

  onBeforeUnmount(() => {
    worker.value?.terminate()
  })

  return { scrollEnd, pageList, loaded }
}