import { useLayoutEffect, useReducer } from 'react'
import { useUniwindContext } from '../core/context'
import type { RNStyle } from '../core/types'
import { CSSListener, getWebStyles } from '../core/web'

const emptyState = {} as RNStyle

export const useResolveClassNames = (className: string) => {
    const uniwindContext = useUniwindContext()
    const [styles, recreate] = useReducer(
        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
        undefined,
        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
    )

    useLayoutEffect(() => {
        if (className === '') {
            return
        }

        recreate()

        const dispose = CSSListener.subscribeToClassName(className, recreate)

        return dispose
    }, [className, uniwindContext])

    return styles
}