import { ComponentContext, StyleProp, useStyleObserver } from '@codeleap/styles'
import { useStableReference } from '@codeleap/hooks'
import { useMemo } from 'react'
import { MobileStyleRegistry } from '../Registry'

export const useStylesFor = <T = unknown>(componentName: string, style?: StyleProp<T, string>, context?: ComponentContext): T => {
  const styleObserver = useStyleObserver(style)
  const stableContext = useStableReference(context ?? {})

  const styles = useMemo(() => {
    return MobileStyleRegistry.current.styleFor(componentName, style, true, stableContext)
  }, [styleObserver, stableContext])

  return styles
}