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

const stylesheet = StyleSheet.create({
    contentContainer: {
        justifyContent: "center",
        flexDirection: "column",
        overflow: "hidden",
        display: "flex",
        minWidth: 0,
        flex: 1
    },
    actionContainer: {
        justifyContent: "center",
        alignItems: "center",
        display: "flex"
    },
    avatarContainer: {
        position: "relative",
        display: "flex"
    },
    badgeContainer: {
        position: "absolute",
        bottom: 0,
        right: 0,
        left: 0,
        top: 0
    },
    subTitleContainer: {
        flexDirection: "row",
        alignItems: "center",
        display: "flex"
    },
    container: {
        flexDirection: "row",
        alignItems: "center",
        display: "flex"
    },
    subTitle: {
        flex: 1,
        flexShrink: 1
    }
});

export const useStyles = ({
    backgroundColor,
    spreadBehaviour,
    isDisabled,
    maxWidth,
    radiuses,
    colors,
    spaces
}: UserShortcutDynamicStyleType) => {
    const styles = {
        container: {
            backgroundColor: backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor],
            paddingHorizontal: spaces.spacingMd,
            paddingVertical: spaces.spacingMd,
            borderRadius: radiuses.md,
            gap: spaces.spacingSm,
            maxWidth
        } as Mutable<ViewStyle>,
        dotSeperator: {
            marginHorizontal: spaces.spacingXs
        } as Mutable<TextStyle>,
        actionContainer: {
            marginLeft: spaces.spacingMd
        } as Mutable<ViewStyle>,
        subTitleContainer: {
            gap: spaces.spacingXs / 2
        } as Mutable<ViewStyle>
    };

    if(isDisabled) {
        styles.container.opacity = 0.33;
    }

    if (spreadBehaviour === "baseline") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.width = "auto";
    } else if (spreadBehaviour === "stretch") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.justifyContent = "center";
        styles.container.flexShrink = 1;
        styles.container.width = "100%";
    }

    return styles;
};
export default stylesheet;
