import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import http from '@/plugins/http'
import { IonicVue } from '@ionic/vue'
import * as IonComponents from '@ionic/vue'
import i18n from './locales'
import Vant from 'vant'
import { useDark } from '@vueuse/core'
import toast from '@/utils/toast'
import setDefaultOptions from 'date-fns/setDefaultOptions'
import zhCN from 'date-fns/locale/zh-CN'
import enUS from 'date-fns/locale/en-US'
import { StatusBar, Style } from '@capacitor/status-bar'
import { Capacitor } from '@capacitor/core'
import { useBackButton } from '@ionic/vue'

import 'normalize.css/normalize.css'

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css'

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css'
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css'
import '@ionic/vue/css/float-elements.css'
import '@ionic/vue/css/text-alignment.css'
import '@ionic/vue/css/text-transformation.css'
import '@ionic/vue/css/flex-utils.css'
import '@ionic/vue/css/display.css'

import 'vant/lib/index.css'

import './styles/main.less'
import './styles/theme/variables.less'

import common from './mixins/common'

const app = createApp(App)
app.use(i18n)
app.use(IonicVue)
app.use(router)
app.use(createPinia())
app.use(http)
app.use(Vant)
app.use(toast)
app.mixin(common)

// ionic components
Object.keys(IonComponents).forEach(key => {
    if (/^Ion[A-Z]\w+$/.test(key)) {
        app.component(key, IonComponents[key])
    }
})

//dark mode
const dark = useDark()
dark.value = false

router.isReady().then(() => {
    app.mount('#app')
})
if (navigator.language === 'zh-CN') {
    setDefaultOptions({ locale: zhCN })
} else {
    setDefaultOptions({ locale: enUS })
}
if (Capacitor.isNativePlatform()) {
    StatusBar.setOverlaysWebView({ overlay: true })
    StatusBar.setStyle({ style: Style.Light })
    if (Capacitor.getPlatform() === 'android') {
        const style = document.documentElement.style

        window.AndroidNotch.getInsetTop(
            px => {
                style.setProperty('--ion-safe-area-top', px + 'px')
            },
            err => console.error('Failed to get insets top:', err)
        )
    }
}
