import { reactive, computed } from 'vue'
import { fetchCurrentMenu } from '@/api/menu'

const state = reactive({
  loaded: false,
  loading: false,
  error: null,
  topMenus: [],
  activeId: null,
})

function bySort(a, b) {
  return (a?.sort ?? 0) - (b?.sort ?? 0)
}

function sortTree(list) {
  if (!Array.isArray(list)) return []
  return list
    .slice()
    .sort(bySort)
    .map((m) => ({ ...m, children: Array.isArray(m.children) ? sortTree(m.children) : [] }))
}

export function useMenu() {
  async function load(force = false) {
    if (state.loading) return
    if (state.loaded && !force) return
    state.loading = true
    state.error = null
    try {
      const data = await fetchCurrentMenu()
      const list = Array.isArray(data) ? data : []
      state.topMenus = sortTree(list)
      state.loaded = true
      if (!state.topMenus.some((m) => m.id === state.activeId)) {
        state.activeId = state.topMenus[0]?.id ?? null
      }
    } catch (err) {
      state.error = err
    } finally {
      state.loading = false
    }
  }

  function setActive(id) {
    if (state.activeId === id) return
    state.activeId = id
  }

  const activeTopMenu = computed(
    () => state.topMenus.find((m) => m.id === state.activeId) ?? null,
  )

  const subMenus = computed(() => {
    const cur = activeTopMenu.value
    return cur && Array.isArray(cur.children) ? cur.children : []
  })

  return { state, load, setActive, activeTopMenu, subMenus }
}