import { nextTick, ref } from 'vue'
import { SystemInfo } from '@/types/types'

const systemInfo = ref<SystemInfo>({
  offsetWidth: 0,
  offsetHeight: 0,
  clientWidth: 0,
  clientHeight: 0,
  scrollWidth: 0,
  scrollHeight: 0,
  isWideScreen: false,
  isMobile: false,
  isAndroid: false,
  isIos: false,
  isXsScreen: false, // <576
  isSmScreen: false, // >=576
  isMdScreen: false, // >=768
  isLgScreen: false, // >=992
  isXlScreen: false, // >=1200
  isXxlScreen: false, // >=1600
  xsScreen: false, // <576
  smScreen: false, // >=576
  mdScreen: false, // >=768
  lgScreen: false, // >=992
  xlScreen: false, // >=1200
  xxlScreen: false // >=1600
})
const initUa = () => {
  const ua = navigator.userAgent
  systemInfo.value.isIos = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  systemInfo.value.isAndroid =
    ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1 || /micromessenger/.test(ua)
  systemInfo.value.isMobile = systemInfo.value.isIos || systemInfo.value.isAndroid
}
initUa()
const resetSizeScreen = () => {
  systemInfo.value.isXsScreen = document.body.clientWidth < 576
  systemInfo.value.isSmScreen = document.body.clientWidth >= 576 && document.body.clientWidth < 768
  systemInfo.value.isMdScreen = document.body.clientWidth >= 768 && document.body.clientWidth < 992
  systemInfo.value.isLgScreen = document.body.clientWidth >= 992 && document.body.clientWidth < 1200
  systemInfo.value.isXlScreen =
    document.body.clientWidth >= 1200 && document.body.clientWidth < 1600
  systemInfo.value.isXxlScreen = document.body.clientWidth >= 1600

  systemInfo.value.xsScreen = document.body.clientWidth < 576
  systemInfo.value.smScreen = document.body.clientWidth >= 576
  systemInfo.value.mdScreen = document.body.clientWidth >= 768
  systemInfo.value.lgScreen = document.body.clientWidth >= 992
  systemInfo.value.xlScreen = document.body.clientWidth >= 1200
  systemInfo.value.xxlScreen = document.body.clientWidth >= 1600

  systemInfo.value.isWideScreen = document.body.clientWidth >= 1200
}
const resize = () => {
  nextTick().then(() => {
    if (document && document.body) {
      systemInfo.value.offsetWidth = document.body.offsetWidth
      systemInfo.value.offsetHeight = document.body.offsetHeight
      systemInfo.value.clientWidth = document.body.clientWidth
      systemInfo.value.clientHeight = document.body.clientHeight
      systemInfo.value.scrollWidth = document.body.scrollWidth
      systemInfo.value.scrollHeight = document.body.scrollHeight
      resetSizeScreen()
    }
  })
}
resize()
window.addEventListener('resize', resize)

export default systemInfo
