import {
    Fragment,
    type FC
} from "react";
import {
    ScrollView,
    View
} from "react-native";
import type IPageContainerProps from "./type";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import {
    SafeAreaView
} from "react-native-safe-area-context";

const PageContainer: FC<IPageContainerProps> = ({
    backgroundColor = "default" as keyof NCoreUIKit.ContainerContentColors,
    isWrapSafeareaContext = false,
    safeAreaViewBackgroundColor,
    isScrollable = false,
    safeAreaViewStyle,
    scrollViewStyle,
    scrollViewProps,
    renderOverlays,
    customTheme,
    children,
    style,
    ...props
}) => {
    const {
        colors,
        spaces
    } = NCoreUIKitTheme.useContext(customTheme);

    const renderScrollview = () => {
        if(style) {
            console.error("Hey!. You make wrong things. If you must be use isScrollable={true}, you must be use scrollViewStyle. Do not use style prop for this case.");
        }

        if(Object.keys(props).length) {
            console.error("Hey!. You make wrong things. If you must be use isScrollable={true}, you must be use scrollViewProps. Do not use default view props for this case.");
        }

        return <ScrollView
            keyboardShouldPersistTaps="handled"
            {...scrollViewProps}
            contentContainerStyle={[
                {
                    padding: spaces.spacingMd
                },
                scrollViewProps?.contentContainerStyle
            ]}
            style={[
                {
                    backgroundColor: colors.content.container[backgroundColor]
                },
                stylesheet.container,
                scrollViewStyle
            ]}
        >
            {children}
        </ScrollView>;
    };

    const renderView = () => {
        if(scrollViewStyle) {
            console.error("Hey!. You make wrong things. If you must be use isScrollable={false}, you must be use style. Do not use scrollViewStyle prop for this case.");
        }

        if(scrollViewProps) {
            console.error("Hey!. You make wrong things. If you must be use isScrollable={false}, you musn't use scrollViewProps.");
        }

        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
            ]}
        >
            {isScrollable ? renderScrollview() : renderView()}
            {renderOverlays ? renderOverlays() : null}
        </SafeAreaView>;
    };

    const renderWithoutSafeareaView = () => {
        return isScrollable ? renderScrollview() : renderView();
    };

    const renderSafeareaContext = () => {
        return isWrapSafeareaContext ? renderWithSafeareaView() : <Fragment>
            {renderWithoutSafeareaView()}
            {renderOverlays ? renderOverlays() : null}
        </Fragment>;
    };

    return renderSafeareaContext();
};
export default PageContainer;