import type { GlobalThemeOverrides } from 'naive-ui'
import { computed, watch } from 'vue'
import { darkTheme, useOsTheme } from 'naive-ui'
import { useAppStore } from '@/store'

export function useTheme() {
    const appStore = useAppStore()

    const OsTheme = useOsTheme()

    const isDark = computed(() => {
        if (appStore.theme === 'auto') return OsTheme.value === 'dark'
        else return appStore.theme === 'dark'
    })

    const theme = computed(() => {
        return isDark.value ? darkTheme : undefined
    })

    const themeOverrides = computed<GlobalThemeOverrides>(() => {
        return {
            common: {
                primaryColor: '#15A8AA',
                primaryColorHover: '#1CD1D3',
                primaryColorPressed: '#18A8AA',
                primaryColorSuppl: '#15A8AA'
            },
            Button: {
                heightLarge: '44px',
                textColorPrimary: '#fff',
                textColorPressedPrimary: '#fff',
                textColorFocusPrimary: '#fff',
                textColorHoverPrimary: '#fff'
            },
            Input: {
                color: '#ffffff00',
                border: isDark.value ? '1px solid #2B3038' : '1px solid rgb(224,224,230)'
            },
            Card: {
                colorModal: isDark.value ? '#0F1014' : '#fff'
            },
            Dialog: {
                color: isDark.value ? '#0F1014' : '#fff'
            },
            Form: {
                feedbackFontSizeMedium: '12px'
            },
            Avatar: {
                heightLarge: '50px',
                heightMedium: '40px'
            }
        }
    })

    watch(
        () => isDark.value,
        dark => {
            if (dark) document.documentElement.classList.add('dark')
            else document.documentElement.classList.remove('dark')
        },
        { immediate: true }
    )

    return { theme, themeOverrides, isDark }
}
