ncore-ui-kit/src/components/radioButton/stylesheet.ts

import {
    type TextStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import {
    type RadioButtonDynamicStyleType,
    type RadioButtonTypeConstantType,
    type RadioButtonTypes,
    type RadioButtonType
} from "./type";
import type {
    Mutable
} from "../../types";

export const RADIO_BUTTON_TYPE_STYLES: Record<
    RadioButtonType,
    {
        containerColor: keyof NCoreUIKit.ContainerContentColors;
        indicatorColor: keyof NCoreUIKit.IconContentColors;
        subTitleColor: keyof NCoreUIKit.TextContentColors;
        borderColor: keyof NCoreUIKit.BorderContentColors;
        titleColor: keyof NCoreUIKit.TextContentColors;
    }
> = {
    primary: {
        indicatorColor: "emphasized",
        borderColor: "emphasized",
        containerColor: "mid",
        subTitleColor: "low",
        titleColor: "mid"
    },
    danger: {
        subTitleColor: "dangerLow",
        indicatorColor: "danger",
        containerColor: "danger",
        borderColor: "danger",
        titleColor: "danger"
    },
    success: {
        subTitleColor: "successLow",
        indicatorColor: "success",
        containerColor: "success",
        borderColor: "success",
        titleColor: "success"
    },
    warning: {
        subTitleColor: "warningLow",
        indicatorColor: "warning",
        containerColor: "warning",
        borderColor: "warning",
        titleColor: "warning"
    },
    info: {
        subTitleColor: "infoLow",
        indicatorColor: "info",
        containerColor: "info",
        borderColor: "info",
        titleColor: "info"
    },
    neutral: {
        indicatorColor: "emphasized",
        containerColor: "mid",
        borderColor: "subtle",
        subTitleColor: "low",
        titleColor: "mid"
    }
};

export const getRadioButtonType = ({
    type
}: RadioButtonTypeConstantType): RadioButtonTypes => {
    const currentType = RADIO_BUTTON_TYPE_STYLES[type];

    return currentType;
};

const stylesheet = StyleSheet.create({
    container: {
        backgroundColor: "transparent",
        borderColor: "transparent",
        flexDirection: "row",
        borderStyle: "solid",
        alignItems: "center",
        display: "flex"
    },
    indicatorContainer: {
        position: "relative"
    },
    indicator: {
        borderStyle: "solid"
    },
    contentContainer: {
        justifyContent: "center",
        flexDirection: "column"
    },
    titleContainer: {
        justifyContent: "flex-start",
        flexDirection: "row",
        alignItems: "center"
    },
    title: {
        textAlign: "left",
        margin: 0
    },
    subTitle: {
        textAlign: "left"
    },
    loading: {},
    overlay: {
        position: "absolute",
        display: "none",
        zIndex: 999,
        bottom: -2,
        right: -2,
        left: -2,
        top: -2
    }
});

export const useStyles = ({
    displayBehaviourWhileLoading,
    RADIO_INDICATOR_SIZE,
    spreadBehaviour,
    inlineSpaces,
    currentType,
    isDisabled,
    isLoading,
    isChecked,
    radiuses,
    borders,
    colors,
    isFlip,
    spaces,
    type
}: RadioButtonDynamicStyleType) => {
    const styleType = type === "danger" ? "error" : type;

    const styles = {
        container: {
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        indicatorContainer: {
            borderRadius: (RADIO_INDICATOR_SIZE + (spaces.spacingXs * 2) + (borders.line * 2)) / 2,
            backgroundColor: colors.content.container[currentType.containerColor],
            borderColor: colors.content.border[currentType.borderColor],
            borderWidth: borders.line,
            padding: spaces.spacingXs
        } as Mutable<ViewStyle>,
        indicator: {
            backgroundColor: colors.content.icon[currentType.indicatorColor],
            borderRadius: RADIO_INDICATOR_SIZE / 2,
            height: RADIO_INDICATOR_SIZE,
            width: RADIO_INDICATOR_SIZE
        } as Mutable<ViewStyle>,
        contentContainer: {
            marginLeft: spaces.spacingSm
        } as Mutable<ViewStyle>,
        titleContainer: {

        } as Mutable<ViewStyle>,
        title: {

        } as Mutable<TextStyle>,
        subTitle: {

        } as Mutable<TextStyle>,
        loading: {
        } as Mutable<ViewStyle>,
        overlay: {
            borderRadius: radiuses.actions
        } as Mutable<ViewStyle>,
        optionalText: {
            marginLeft: inlineSpaces.subTitle
        } as Mutable<TextStyle>
    };

    if(styleType === "neutral") {
        styles.indicatorContainer.borderColor = colors.content.border.default;
    }

    if (isLoading) {
        if (displayBehaviourWhileLoading === "disabled") {
            styles.indicatorContainer.borderColor = colors.system.state.overlay.disabled[styleType];

            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
            styles.overlay.display = "flex";
        }
    }

    if (isFlip) {
        styles.contentContainer.marginRight = spaces.spacingSm;
        styles.titleContainer.justifyContent = "flex-end";
        styles.contentContainer.marginLeft = 0;
        styles.subTitle.textAlign = "right";
        styles.title.textAlign = "right";
    }

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

    if(isChecked) {
        if(styleType === "neutral") {
            styles.indicatorContainer.backgroundColor = colors.content.container.selected;
            styles.indicatorContainer.borderColor = colors.content.border.emphasized;
        }
    }

    if (isDisabled) {
        if(styleType === "neutral" && isChecked) {
            styles.indicatorContainer.backgroundColor = colors.system.state.border.disabled.primary;
            styles.indicatorContainer.borderColor = colors.system.state.border.disabled.primary;
        } else {
            styles.indicatorContainer.borderColor = colors.system.state.border.disabled[styleType];
        }

        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
        styles.overlay.display = "flex";
    }

    return styles;
};
export default stylesheet;