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

export default () => {
  const systemInfo = inject<Ref<SystemInfo>>('systemInfo')
  const height = computed(() => {
    if (isUndefined(systemInfo)) {
      return 100
    }
    if (systemInfo.value.clientHeight > 1000) {
      return 900
    }
    if (systemInfo.value.clientHeight > 800) {
      return 600
    }
    if (systemInfo.value.clientHeight > 600) {
      return 440
    }
    if (systemInfo.value.clientHeight > 500) {
      return 440
    }
    return systemInfo.value.clientHeight - 60
  })
  const width = computed(() => {
    if (!systemInfo) {
      return '520px'
    }
    if (systemInfo.value.clientWidth > 1920) {
      return '720px'
    }
    if (systemInfo.value.clientWidth > 1360) {
      return '620px'
    }
    if (systemInfo.value.clientWidth < 600) {
      return `${systemInfo.value.clientWidth}px`
    }
    return '520px'
  })
  return {
    width,
    height
  }
}
