import {
    type FC
} from "react";
import {
    View
} from "react-native";
import type ISeperatorProps from "./type";
import stylesheet, {
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme
} from "../../core/hooks";
import Text from "../text";

const Seperator: FC<ISeperatorProps> = ({
    direction = "horizontal",
    customColor,
    isShowTitle,
    length,
    color,
    style,
    title,
    ...props
}) => {
    const {
        borders,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const {
        container: containerDynamicStyle,
        indicator: indicatorDynamicStyle,
        title: titleDynamicStyle
    } = useStyles({
        customColor,
        direction,
        borders,
        length,
        colors,
        spaces,
        color
    });

    const renderIndicator = (order: "first" | "last") => {
        if(order === "first") {
            if(isShowTitle) {
                return <View
                    style={[
                        stylesheet.indicator,
                        indicatorDynamicStyle
                    ]}
                />;
            } else {
                return null;
            }
        }

        return <View
            style={[
                stylesheet.indicator,
                indicatorDynamicStyle
            ]}
        />;
    };

    const renderTitle = () => {
        if(!isShowTitle) {
            return null;
        }

        return <Text
            style={{
                ...stylesheet.title,
                ...titleDynamicStyle
            }}
        >
            {title ? title : localize("or")}
        </Text>;
    };

    return <View
        {...props}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
    >
        {renderIndicator("first")}
        {renderTitle()}
        {renderIndicator("last")}
    </View>;
};
export default Seperator;
