import { useLayoutEffect, useReducer } from 'react'
import { useUniwindContext } from '../../core/context'
import { UniwindListener } from '../../core/listener'
import { UniwindStore } from '../../core/native'
import type { ComponentState } from '../../core/types'

export const useStyle = (className: string | undefined, componentProps: Record<string, any>, state?: ComponentState) => {
    'use no memo'
    const uniwindContext = useUniwindContext()
    const [_, rerender] = useReducer(() => ({}), {})
    const styleState = UniwindStore.getStyles(className, componentProps, state, uniwindContext)

    useLayoutEffect(() => {
        if (__DEV__ || styleState.dependencies.length > 0) {
            const dispose = UniwindListener.subscribe(rerender, styleState.dependencies)

            return dispose
        }
    }, [styleState.dependencySum])

    return styleState.styles
}