import { AppTheme } from '@/constants/theme'
import { createStore } from '../base'
import { localData } from '../storage'
import plus from '@/utils/h5plus'

export const themeStore = createStore({
    state() {
        return {
            appTheme: localData.getRef('appTheme'),
            clientWidth: 0, // 客户端宽度
            isMobile: false, // 是否移动设备
        }
    },
    actions: {
        // 设置状态栏主题色
        setStatusBarTheme(theme: AppTheme) {
            switch (theme) {
                case AppTheme.Default:
                case AppTheme.Dark: {
                    plus.setStatusBarStyle('light')
                    break
                }
                default: {
                    plus.setStatusBarStyle('dark')
                }
            }
        },
        // 设置主题
        setTheme(key: keyof typeof AppTheme) {
            const theme = AppTheme[key]
            this.actions.setStatusBarTheme(theme)
            document.documentElement.setAttribute('theme', theme)
            this.state.appTheme = theme
        },
        // 适配客户端屏幕
        screenAdapter(remsize = false) {
            const { clientWidth, isMobile } = this.$mapState()
            const { isPc } = this.actions.getClientAgent()
            const el = document.documentElement
            const body = document.body
            let screenWidth = el.clientWidth

            if (remsize) {
                const designSize = 750
                isMobile.value = 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) {
                    isMobile.value = false
                } else {
                    isMobile.value = true
                }

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

            clientWidth.value = body.clientWidth
        },
        // 获取客户端平台
        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 = () => {
    const theme = themeStore.state.appTheme
    themeStore.actions.setStatusBarTheme(theme)
    document.documentElement.setAttribute('theme', theme)
    document.removeEventListener('DOMContentLoaded', loadTheme)
}

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