import {
    Modal,
    type ModalProps,
    type NativeSyntheticEvent,
    Platform,
    type ViewStyle,
} from "react-native"
import {GestureHandlerRootView} from "react-native-gesture-handler"

// TODO: this is funky with Expo
// import { FullWindowOverlay } from 'react-native-screens';

interface ModalPortalProps
    extends Pick<ModalProps, "visible" | "onDismiss" | "children" | "onShow"> {
    // biome-ignore lint/suspicious/noExplicitAny: not useful to type
    onRequestClose: (event: NativeSyntheticEvent<any>) => void
}

function ModalPortalIos({children, ...rest}: ModalPortalProps) {
    return (
        <Modal transparent {...rest}>
            {children}
        </Modal>
    )
}

const FLEX_STYLE = {flex: 1} satisfies ViewStyle
function ModalPortalAndroid({children, ...rest}: ModalPortalProps) {
    return (
        <Modal transparent {...rest}>
            <GestureHandlerRootView style={FLEX_STYLE}>{children}</GestureHandlerRootView>
        </Modal>
    )
}

export const ModalPortal = Platform.OS === "ios" ? ModalPortalIos : ModalPortalAndroid