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

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

export const TEXT_AREA_INPUT_TYPE_STYLES: Record<
    TextAreaInputType,
    TextAreaInputTypes
> = {
    default: {
        focusBorderColor: "emphasized",
        borderColor: "emphasized",
        hintTextIconColor: "mid",
        placeholderColor: "low",
        containerColor: "mid",
        hintTextColor: "mid",
        titleColor: "high",
        inputColor: "mid",
        iconColor: "mid"
    },
    danger: {
        placeholderColor: "dangerLow",
        hintTextIconColor: "danger",
        focusBorderColor: "danger",
        containerColor: "danger",
        hintTextColor: "danger",
        borderColor: "danger",
        titleColor: "danger",
        inputColor: "danger",
        iconColor: "danger"
    },
    success: {
        placeholderColor: "successLow",
        hintTextIconColor: "success",
        focusBorderColor: "success",
        containerColor: "success",
        hintTextColor: "success",
        borderColor: "success",
        titleColor: "success",
        inputColor: "success",
        iconColor: "success"
    },
    warning: {
        placeholderColor: "warningLow",
        hintTextIconColor: "warning",
        focusBorderColor: "warning",
        containerColor: "warning",
        hintTextColor: "warning",
        borderColor: "warning",
        titleColor: "warning",
        inputColor: "warning",
        iconColor: "warning"
    },
    info: {
        placeholderColor: "infoLow",
        hintTextIconColor: "info",
        focusBorderColor: "info",
        containerColor: "info",
        hintTextColor: "info",
        borderColor: "info",
        titleColor: "info",
        inputColor: "info",
        iconColor: "info"
    },
    question: {
        focusBorderColor: "emphasized",
        borderColor: "emphasized",
        hintTextIconColor: "mid",
        placeholderColor: "low",
        containerColor: "mid",
        hintTextColor: "mid",
        titleColor: "mid",
        inputColor: "mid",
        iconColor: "mid"
    }
};

export const getTextAreaInputType = ({
    type
}: {
    type: TextAreaInputType;
}) => {
    const currentType = TEXT_AREA_INPUT_TYPE_STYLES[type];

    return currentType;
};

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "column",
        boxSizing: "border-box",
        display: "flex"
    },
    content: {
        alignItems: "flex-start",
        boxSizing: "border-box",
        flexDirection: "row",
        borderStyle: "solid",
        position: "relative",
        display: "flex",
        minWidth: 250
    },
    input: {
        backgroundColor: "transparent",
        borderColor: "transparent",
        textAlignVertical: "top",
        paddingBottom: 0,
        paddingRight: 0,
        paddingLeft: 0,
        borderWidth: 0,
        paddingTop: 0,
        minHeight: 55,
        zIndex: 99
    },
    cleanButton: {
        justifyContent: "center",
        alignSelf: "flex-start",
        alignItems: "center",
        display: "flex",
        zIndex: 99
    },
    hideTextIconContainer: {
        justifyContent: "center",
        alignItems: "center",
        alignSelf: "center",
        display: "flex",
        zIndex: 99,
        height: 18
    },
    titleContainer: {
        flexDirection: "row",
        alignItems: "center"
    },
    title: {
    },
    icon: {
        justifyContent: "center",
        alignContent: "center",
        alignItems: "center",
        display: "flex",
        zIndex: 99
    },
    required: {
    },
    hintTextIcon: {
    },
    hintText: {
        flexDirection: "row",
        alignItems: "center",
        display: "flex"
    },
    subTitle: {
    },
    overlay: {
        position: "absolute",
        zIndex: 98,
        bottom: 0,
        right: 0,
        left: 0,
        top: 0
    },
    rightIcon: {
        justifyContent: "center",
        alignItems: "center",
        alignSelf: "center",
        display: "flex",
        zIndex: 99
    },
    lengthLimiterContainer: {
        justifyContent: "flex-end",
        flexDirection: "row"
    },
    inputContainer: {
        flexDirection: "column",
        flex: 1
    }
});

export const useStyles = ({
    spreadBehaviour,
    inlineSpaces,
    currentType,
    typography,
    isDisabled,
    isFocused,
    maxHeight,
    radiuses,
    borders,
    colors,
    spaces,
    type
}: TextAreaInputDynamicStyleType) => {
    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;

    const styles = {
        container: {
        } as Mutable<ViewStyle>,
        content: {
            backgroundColor: colors.content.container[currentType.containerColor],
            borderColor: colors.content.container[currentType.containerColor],
            paddingBottom: spaces.spacingMd,
            paddingRight: spaces.spacingMd,
            borderRadius: radiuses.actions,
            paddingLeft: spaces.spacingMd,
            paddingTop: spaces.spacingMd,
            borderWidth: borders.line
        } as Mutable<ViewStyle>,
        input: {
            ...typography.labelLargeSize,
            color: colors.content.text[currentType.inputColor],
            maxHeight: maxHeight
        } as Mutable<TextStyle>,
        cleanButton: {
            marginLeft: spaces.spacingSm
        } as Mutable<ViewStyle>,
        hintTextIconContainer: {
            marginLeft: spaces.spacingSm
        } as Mutable<ViewStyle>,
        titleContainer: {
            marginBottom: spaces.spacingSm
        } as Mutable<ViewStyle>,
        title: {

        } as Mutable<TextStyle>,
        icon: {
            marginRight: spaces.spacingSm
        } as Mutable<ViewStyle>,
        required: {
            marginRight: inlineSpaces.required
        } as Mutable<ViewStyle>,
        hintTextIcon: {
            marginRight: spaces.spacingXs
        } as Mutable<ViewStyle>,
        hintText: {
            marginTop: spaces.spacingSm
        } as Mutable<TextStyle>,
        subTitle: {
            marginLeft: inlineSpaces.subTitle
        } as Mutable<TextStyle>,
        overlay: {
            borderRadius: radiuses.actions - 1
        } as Mutable<ViewStyle>,
        rightIcon: {
            marginLeft: spaces.spacingSm
        } as Mutable<ViewStyle>,
        lengthLimiterContainer: {

        } as Mutable<ViewStyle>,
        inputContainer: {

        } as Mutable<ViewStyle>
    };

    if(isDisabled) {
        const disableStyleType = styleType === "default" ? "neutral" : styleType;

        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
        styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];

        styles.input.color = colors.content.text.disabled;
    }

    if (spreadBehaviour === "baseline") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.width = "auto";
    }

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

    if(isFocused && !isDisabled) {
        if(type === "question" || type === "default") {
            styles.content.borderColor = colors.content.border.emphasized;
        } else {
            styles.content.borderColor = colors.content.border[type];
        }
    }

    return styles;
};
export default stylesheet;