import { useCallback, useState } from 'react'
import { LayoutChangeEvent, LayoutRectangle } from 'react-native'

/**
 * Hook that can be used for accessing the layout rectangle (size) of a component
 */
export function useComponentLayout(
  defaultRectangle?: LayoutRectangle
): [(e: LayoutChangeEvent) => void, LayoutRectangle | null] {
  const [layout, setLayout] = useState<LayoutRectangle | null>(
    defaultRectangle ?? null
  )
  const onLayout = useCallback((e: LayoutChangeEvent) => {
    setLayout(e.nativeEvent.layout)
  }, [])

  return [onLayout, layout]
}