const { navigator, screen } = window
// 獲取裝置資訊
const { userAgent } = navigator
let osType = 'unknow'
if (/Android/i.test(userAgent)) {
  osType = 'android'
}
if (/\(i[^;]+;( U;)? CPU.+Mac OS X/.test(userAgent)) {
  osType = 'ios'
}

// 是否是移動端
const isMobile = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|MQQBrowser)/i.test(
  userAgent
)
 
// 是否是iPhone X
const isIPhoneX =
  osType === 'ios' && screen.height >= 812 && screen.width >= 375
// 是否支援webp圖片編碼
const isWebpEnv =
  document
    .createElement('canvas')
    .toDataURL('image/webp')
    .indexOf('data:image/webp') === 0

// app資訊
let appInfo = {
  // 是否是app
  isApp: false
 
,
  // 是否是混合app
  isHybrid: false,
  // 是否是原生app
  isNative: false,
  // 是否是iOS
  isIos: false,
  // 是否是Android
  isAndroid: false,
  // 系統型別 (iOS, Android)
  osPlatform: '',
  // app版本
  version: '',
  // app User-Agent內容
  appua: ''
}

const appInfoUserAgent = userAgent.split(' AI/')
if (appInfoUserAgent.length > 1
 
) {
  const [typePlat, version] = appInfoUserAgent[1].split('=')
  const [appType, osPlatform] = typePlat.split('-')

  appInfo = {
    isApp: true,
    isHybrid: appType === 'Hybrid',
    isNative: appType === 'Native',
    isIos: osPlatform === 'iOS',
    isAndroid: osPlatform === 'Android',
    osPlatform,
    version,
    appua: `AI/${appInfoUserAgent[1]}`
  }
}

// standalone 獨立,單獨的意思
// 蘋果iOS系統,能讓 web 頁面展示成app的樣子,看起來像原生,本地app一樣
// 在獨立執行模式下,Safari 能隱藏頂部的網址輸入框,底部的工具欄,讓web完全像app的樣子
// 使用html meta能開啟獨立模式：
// <meta name="apple-mobile-web-app-capable" content="yes">
// 在JS中,可以用window.navigator.standalone檢測現在是不是在獨立模式下
// 它的返回值,是一個布林值,只在iOS Safari存在
export default {
  userAgent,
  osType,
  isMobile,
  standalone: !!navigator.standalone,
  isIos: osType === 'ios',
  isAndroid: osType === 'android',
  isIPhoneX,
  isSafari: /Safari/i.test(userAgent),
  isWeixin: /MicroMessenger/i.test(userAgent),
  isQQ: /\sQQ/i.test(userAgent),
  isWebpEnv,
  appInfo
}