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

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "row",
        alignItems: "center",
        alignSelf: "stretch"
    },
    iconContainer: {
        justifyContent: "center",
        alignItems: "center"
    },
    rightIconContainer: {

    },
    title: {
        textAlign: "left"
    },
    subTitle: {
        textAlign: "left"
    },
    rightContainer: {
        justifyContent: "flex-end",
        flexDirection: "row",
        alignItems: "center"
    },
    leftContainer: {
        justifyContent: "flex-start",
        flexDirection: "row",
        alignItems: "center"
    },
    rightSubTitle: {

    },
    rightTitle: {

    }
});

export const useStyles = ({
    isTransparentBackground,
    spaces,
    colors,
    type
}: RowCardDynamicStyleType) => {
    const styles = {
        container: {
            backgroundColor: isTransparentBackground ? "transparent" : colors.content.container.mid,
            padding: spaces.spacingMd
        } as Mutable<ViewStyle>,
        title: {
            textAlign: "left"
        } as Mutable<TextStyle>,
        subTitle: {
            textAlign: "left"
        } as Mutable<TextStyle>,
        iconContainer: {
            paddingHorizontal: spaces.spacingSm
        } as Mutable<ViewStyle>,
        rightSubTitle: {
            textAlign: "right"
        } as Mutable<TextStyle>,
        leftContainer: {
            paddingHorizontal: spaces.spacingSm
        } as Mutable<ViewStyle>,
        rightContainer: {
            paddingHorizontal: spaces.spacingSm
        } as Mutable<ViewStyle>,
        rightIconContainer: {
            paddingHorizontal: spaces.spacingSm
        } as Mutable<ViewStyle>,
        rightTitle: {
            textAlign: "right"
        } as Mutable<TextStyle>
    };

    if(type === "evenly") {
        styles.rightContainer.flex = 1;
        styles.leftContainer.flex = 1;
    } else {
        styles.leftContainer.flex = 1;
    }

    return styles;
};
export default stylesheet;