import type { FC } from 'react';
import React from 'react';
import type { BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
import { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import { useTheme } from '../../branding';
import themedStyles from './styles';

type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;

interface BackdropExtraProps {
    pressBehavior?: BackdropPressBehavior;
}

type BackdropProps = BottomSheetBackdropProps & BackdropExtraProps;

const Backdrop: FC<BackdropProps> = ({ pressBehavior, ...props }) => {
    const { theme } = useTheme();

    const styles = themedStyles[theme];

    return (
        <BottomSheetBackdrop
            {...props}
            appearsOnIndex={0}
            disappearsOnIndex={-1}
            opacity={0.8}
            pressBehavior={pressBehavior}
            style={styles.backdrop}
        />
    );
};

export default Backdrop;