import { reactive, toRefs } from 'vue'
import { AppTheme } from '@/constants/theme'
import { defineStore } from '../store'
import { localData } from '../storage'
import plus from '@/utils/h5plus'

export const useGlobalStore = defineStore(() => {
    const appTheme = localData.getRef('appTheme')

    const state = reactive({
        clientWidth: 0, // 客户端宽度
        isMobile: false, // 是否移动设备
    })

    // 设置状态栏主题色
    const setStatusBarTheme = (theme: AppTheme) => {
        switch (theme) {
            case AppTheme.Default:
            case AppTheme.Dark: {
                plus.setStatusBarStyle('light')
                break
            }
            default: {
                plus.setStatusBarStyle('dark')
            }
        }
    }

    // 设置主题
    const setTheme = (key: keyof typeof AppTheme) => {
        const theme = AppTheme[key]
        setStatusBarTheme(theme)
        document.documentElement.setAttribute('theme', theme)
        appTheme.value = theme
    }

    // 适配客户端屏幕
    const screenAdapter = (remsize = false) => {
        const { isPc } = getClientAgent()
        const el = document.documentElement
        const body = document.body
        let screenWidth = el.clientWidth

        if (remsize) {
            const designSize = 750
            state.isMobile = true

            if (isPc) {
                screenWidth = designSize / 1.8
                body.style.setProperty('width', '540px')
            } else {
                body.style.removeProperty('width')
            }

            if (screenWidth > 0) {
                const fontSize = (screenWidth / designSize) * 100 + 'px'
                el.style.setProperty('font-size', fontSize)
            }
        } else {
            if (screenWidth > 768) {
                state.isMobile = false
            } else {
                state.isMobile = true
            }

            el.setAttribute('screen', state.isMobile ? 'small' : 'normal')
        }

        state.clientWidth = body.clientWidth
    }

    // 获取客户端平台
    const getClientAgent = () => {
        const ua = navigator.userAgent,
            isWindowsPhone = /(?:Windows Phone)/.test(ua),
            isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
            isAndroid = /(?:Android)/.test(ua),
            isFireFox = /(?:Firefox)/.test(ua),
            isChrome = /(?:Chrome|CriOS)/.test(ua),
            isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
            isiPhone = /(?:iPhone)/.test(ua) && !isTablet,
            isPc = !isiPhone && !isAndroid && !isSymbian && !isTablet

        return {
            isTablet,
            isiPhone,
            isAndroid,
            isChrome,
            isPc,
        }
    }

    // 加载主题
    const loadTheme = () => {
        setStatusBarTheme(appTheme.value)
        document.documentElement.setAttribute('theme', appTheme.value)
        document.removeEventListener('DOMContentLoaded', loadTheme)
    }

    // 等待 dom 加载完毕
    document.addEventListener('DOMContentLoaded', loadTheme, false)

    return {
        ...toRefs(state),
        appTheme,
        setStatusBarTheme,
        setTheme,
        screenAdapter,
        getClientAgent,
    }
})