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
        const tableHeaderBackground = configStore.getColorVal('tableHeaderBackground')
        const tableHeaderColor = configStore.getColorVal('tableHeaderColor')
        const tableCurrent = configStore.getColorVal('tableCurrent')

        root.style.setProperty('--vxe-table-header-background-color', tableHeaderBackground)
        root.style.setProperty('--vxe-table-header-font-color', tableHeaderColor)
        root.style.setProperty('--vxe-table-row-current-background-color', tableCurrent)
        root.style.setProperty('--vxe-table-row-hover-background-color', tableCurrent)
        root.style.setProperty('--vxe-table-row-hover-current-background-color', tableCurrent)
        root.style.setProperty('--vxe-table-row-hover-striped-background-color', tableCurrent)

        root.style.setProperty('--vxe-ui-table-header-background-color', tableHeaderBackground)
        root.style.setProperty('--vxe-ui-table-header-font-color', tableHeaderColor)
        root.style.setProperty('--vxe-ui-table-row-current-background-color', tableCurrent)
        root.style.setProperty('--vxe-ui-table-row-hover-background-color', tableCurrent)
        root.style.setProperty('--vxe-ui-table-row-hover-current-background-color', tableCurrent)
        root.style.setProperty('--vxe-ui-table-row-hover-striped-background-color', 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
