import {
    type TextStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import type {
    SeperatorDynamicStyle
} from "./type";
import type {
    Mutable
} from "../../types";

const stylesheet = StyleSheet.create({
    container: {
        justifyContent: "center",
        alignItems: "center",
        display: "flex"
    },
    indicator: {
        flex: 1
    },
    title: {
    }
});

export const useStyles = ({
    customColor,
    direction,
    borders,
    length,
    colors,
    spaces,
    color
}: SeperatorDynamicStyle) => {
    const styles = {
        container: {
        } as Mutable<ViewStyle>,
        indicator: {
            backgroundColor: customColor ? customColor : color ? colors.content.border[color] : colors.content.border.subtle
        } as Mutable<ViewStyle>,
        title: {
            marginHorizontal: spaces.spacingSm
        } as Mutable<TextStyle>
    };

    if(length !== undefined) {
        if(direction === "horizontal") {
            styles.container.width = length;
        } else {
            styles.container.height = length;
        }
    }

    if(direction === "horizontal") {
        styles.container.flexDirection = "row";
        styles.container.width = "90%";

        styles.indicator.height = borders.line;
        styles.indicator.width = "100%";
    } else {
        styles.container.flexDirection = "column";
        styles.container.height = "90%";

        styles.indicator.width = borders.line;
        styles.indicator.height = "100%";
    }

    return styles;
};
export default stylesheet;