import {
    useEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import type IMainHeader from "./type";
import stylesheet, {
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import {
    SafeAreaView
} from "react-native-safe-area-context";
import {
    Portal
} from "../../helpers/portalize";
import SiteLogo from "../siteLogo";

const MainHeader = ({
    isWorkWithSafeAreaView = true,
    isWorkWithStickySpace = false,
    isSetAutoHeaderSpace = true,
    isWorkWithSeperator = false,
    backgroundColor = "default",
    portalName = "main-header",
    isWorkWithPortal = false,
    isWorkWithSticky = false,
    renderRight: RenderRight,
    renderLeft: RenderLeft,
    customBackgroundColor,
    onContentHeight,
    customLocalize,
    siteLogoProps,
    customTheme,
    glassEffect,
    children,
    style,
    ...props
}: IMainHeader) => {
    const {
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        safeAreaView: safeAreaViewDynamicStyle,
        container: containerDynamicStyle
    } = useStyles({
        isWorkWithSafeAreaView,
        customBackgroundColor,
        isWorkWithSeperator,
        isWorkWithSticky,
        backgroundColor,
        glassEffect,
        borders,
        spaces,
        colors
    });

    const [
        contentHeight,
        setContentHeight
    ] = useState<null | number>(null);

    useEffect(() => {
        if(onContentHeight) onContentHeight(contentHeight);
    }, [
        contentHeight
    ]);

    const renderRight = () => {
        if(RenderRight) {
            return <RenderRight/>;
        }

        return <View/>;
    };

    const renderLeft = () => {
        if(RenderLeft) {
            return <RenderLeft/>;
        }

        return <SiteLogo
            isWorkWithFlex1={false}
            customLocalize={customLocalize}
            customTheme={customTheme}
            size="medium"
            {...siteLogoProps}
        />;
    };

    const renderContent = () => {
        return <View
            {...props}
            style={[
                style,
                stylesheet.container,
                containerDynamicStyle
            ]}
            onLayout={(event) => {
                if(props && props.onLayout) {
                    props.onLayout(event);
                }

                if(isWorkWithSticky) {
                    const _contentHeight = event.nativeEvent.layout.height;

                    setContentHeight(_contentHeight);

                    if(isSetAutoHeaderSpace) {
                        NCoreUIKitTheme.updateConfigs({
                            headerSpace: _contentHeight
                        });
                    }
                }
            }}
        >
            {renderLeft()}
            {renderRight()}
        </View>;
    };

    const renderContentContainer = () => {
        if(isWorkWithPortal) {
            return <Portal
                name={portalName}
            >
                {renderContent()}
            </Portal>;
        }

        return renderContent();
    };

    const renderSafeAreaView = () => {
        return <SafeAreaView
            edges={[
                "top"
            ]}
            style={[
                safeAreaViewDynamicStyle
            ]}
        >
            {renderContentContainer()}
        </SafeAreaView>;
    };

    const renderWithChildren = () => {
        return <View
            style={[
                stylesheet.baseContainer
            ]}
        >
            {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer()}
            {
                isWorkWithSticky && isWorkWithStickySpace ?
                    <View
                        style={[
                            stylesheet.stickySpacer,
                            {
                                backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : colors.content.container[backgroundColor],
                                height: contentHeight
                            }
                        ]}
                    />
                :
                    null
            }
            {children}
        </View>;
    };

    if(children) {
        return renderWithChildren();
    }

    return isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer();
};
export default MainHeader;