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

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

export const DATE_TIME_PICKER_TYPE_STYLES: Record<
    DateTimePickerType,
    DateTimePickerTypes
> = {
    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 getDateTimePickerType = ({
    type
}: {
    type: DateTimePickerType;
}) => {
    const currentType = DATE_TIME_PICKER_TYPE_STYLES[type];

    return currentType;
};

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "column",
        boxSizing: "border-box"
    },
    contentContainer: {
        boxSizing: "border-box",
        flexDirection: "row",
        borderStyle: "solid",
        alignItems: "center",
        position: "relative",
        minWidth: 250
    },
    content: {

    },
    contentText: {
        minHeight: 20
    },
    cleanButton: {
        justifyContent: "center",
        alignItems: "center",
        alignSelf: "center",
        zIndex: 99
    },
    titleContainer: {
        flexDirection: "row",
        alignItems: "center"
    },
    title: {

    },
    icon: {
        justifyContent: "center",
        alignContent: "center",
        alignItems: "center",
        zIndex: 99
    },
    required: {
    },
    hintTextIcon: {
    },
    hintText: {
        flexDirection: "row",
        alignItems: "center"
    },
    subTitle: {

    },
    overlay: {
        position: "absolute",
        zIndex: 98,
        bottom: 0,
        right: 0,
        left: 0,
        top: 0
    },
    rightIcon: {
        justifyContent: "center",
        alignItems: "center",
        alignSelf: "center",
        zIndex: 99
    }
});

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

    const styles = {
        container: {
        } as Mutable<ViewStyle>,
        contentContainer: {
            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>,
        content: {

        } as Mutable<ViewStyle>,
        contentText: {

        } as Mutable<TextStyle>,
        cleanButton: {
            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>
    };

    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];
    }

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

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

    if(isActive) {
        styles.contentContainer.borderColor = colors.content.border.emphasized;
    }

    return styles;
};
export default stylesheet;