import * as React from "react"
import {StyleSheet, View} from "react-native"

import {useBottomSheetToolboxInternalContext} from "../context"

interface BottomSheetToolboxWrapperProps extends React.PropsWithChildren {
    insetTop?: number
}

export function BottomSheetToolboxWrapper({insetTop, children}: BottomSheetToolboxWrapperProps) {
    const {wrapperHeightSharedValue} = useBottomSheetToolboxInternalContext()

    const unmountFn = () => {
        wrapperHeightSharedValue.set(null)
    }
    const onUnmountRef = React.useRef(unmountFn)
    onUnmountRef.current = unmountFn

    React.useLayoutEffect(() => () => onUnmountRef.current(), [])

    return (
        <View
            style={[StyleSheet.absoluteFillObject, {marginTop: insetTop}]}
            onLayout={(evt) => {
                wrapperHeightSharedValue.set(
                    evt.nativeEvent.layout.height === 0 ? null : evt.nativeEvent.layout.height
                )
            }}
            pointerEvents="box-none"
        >
            {children}
        </View>
    )
}