import {
    type FC
} from "react";
import {
    View
} from "react-native";
import type IBottomSheetProps from "./type";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import {
    SafeAreaView
} from "react-native-safe-area-context";
import Modal from "../modal";

const BottomSheet: FC<IBottomSheetProps> = ({
    isWrapSafeareaContext = true,
    safeAreaViewBackgroundColor,
    backgroundColor = "default",
    safeAreaViewStyle,
    children,
    style,
    ...props
}) => {
    const {
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const renderView = () => {
        return <View
            {...props}
            style={[
                {
                    backgroundColor: colors.content.container[backgroundColor],
                    padding: spaces.spacingMd
                },
                stylesheet.container,
                style
            ]}
        >
            {children}
        </View>;
    };

    const renderWithSafeareaView = () => {
        return <SafeAreaView
            style={[
                safeAreaViewStyle,
                {
                    backgroundColor: safeAreaViewBackgroundColor ? colors.content.container[safeAreaViewBackgroundColor] : colors.content.container[backgroundColor]
                },
                stylesheet.safeAreaViewContainer
            ]}
        >
            {renderView()}
        </SafeAreaView>;
    };

    const renderSafeareaContext = () => {
        return isWrapSafeareaContext ? renderWithSafeareaView() : renderView();
    };

    return <Modal>
        {renderSafeareaContext()}
    </Modal>;
};
export default BottomSheet;