import { useLayoutEffect, useState } from 'react'
import { StyleDependency } from '../common/consts'
import { Uniwind } from '../core'
import { useUniwindContext } from '../core/context'
import { UniwindListener } from '../core/listener'
import type { ThemeName } from '../core/types'

export const useUniwind = (): { theme: ThemeName; hasAdaptiveThemes: boolean } => {
    const uniwindContext = useUniwindContext()
    const [theme, setTheme] = useState(Uniwind.currentTheme)
    const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)

    useLayoutEffect(() => {
        if (uniwindContext.scopedTheme !== null) {
            return
        }

        const dispose = UniwindListener.subscribe(() => {
            setTheme(Uniwind.currentTheme)
            setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes)
        }, [StyleDependency.Theme, StyleDependency.AdaptiveThemes])

        return () => {
            dispose()
        }
    }, [uniwindContext])

    return {
        theme: uniwindContext.scopedTheme ?? theme,
        hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
    }
}