import { computed, inject, Ref, ref, watchEffect } from 'vue'
import { isUndefined } from 'lodash'
import { SystemInfo } from '@/types/types'

export default () => {
  const systemInfo = inject<Ref<SystemInfo>>('systemInfo')
  const visibleMenu = ref(false)
  const smallScreen = computed(() => {
    if (isUndefined(systemInfo)) {
      return false
    }
    return systemInfo.value.clientWidth < 768
  })
  const collapsed = ref(systemInfo && !systemInfo.value.isWideScreen)
  watchEffect(() => {
    if (!isUndefined(systemInfo)) {
      if (!smallScreen.value) {
        collapsed.value = !systemInfo!.value.isWideScreen
      } else {
        collapsed.value = false
      }
    }
  })
  return {
    collapsed,
    visibleMenu,
    smallScreen
  }
}
