import { onMounted, watch } from 'vue'

import { useElementPlusTheme } from 'use-element-plus-theme'
import { useConfig } from '@/stores/config'

const useSetTheme = () => {
    const configStore = useConfig()
    const elementPlusTheme = useElementPlusTheme(configStore.getColorVal('elementUiPrimary'))
    const updateTheme = () => {
        const root = document.documentElement
        root.style.setProperty('--vxe-table-header-background-color', configStore.getColorVal('tableHeaderBackground'))
        root.style.setProperty('--vxe-table-header-font-color', configStore.getColorVal('tableHeaderColor'))
        root.style.setProperty('--vxe-table-row-current-background-color', configStore.getColorVal('tableCurrent'))
        root.style.setProperty('--vxe-table-row-hover-background-color', configStore.getColorVal('tableCurrent'))
        root.style.setProperty(
            '--vxe-table-row-hover-current-background-color',
            configStore.getColorVal('tableCurrent')
        )
        root.style.setProperty(
            '--vxe-table-row-hover-striped-background-color',
            configStore.getColorVal('tableCurrent')
        )
    }
    onMounted(updateTheme)
    watch(
        () => configStore.getColorVal('elementUiPrimary'),
        () => {
            elementPlusTheme.changeTheme(configStore.getColorVal('elementUiPrimary'))
        }
    )
    watch(
        [
            () => configStore.getColorVal('tableHeaderBackground'),
            () => configStore.getColorVal('tableHeaderColor'),
            () => configStore.getColorVal('tableCurrent')
        ],
        () => {
            updateTheme()
        }
    )
}
export default useSetTheme