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

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

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "column",
        position: "relative",
        overflow: "hidden",
        maxHeight: "80%",
        maxWidth: "85%",
        minWidth: "23%",
        zIndex: 99998
    },
    content: {
        flexWrap: "wrap"
    },
    headerContainer: {
        paddingBottom: 0
    },
    bottomContainer: {
        width: "100%"
    },
    bottomContentContainer: {
        justifyContent: "flex-end",
        flexDirection: "row"
    },
    headerTitle: {

    },
    contentText: {

    },
    primaryButton: {

    },
    closeIcon: {
        position: "absolute",
        right: 0,
        top: 0
    }
});

export const useStyles = ({
    contentJustify,
    isVisible,
    radiuses,
    variant,
    colors,
    spaces
}: DialogDynamicStyleType) => {
    const styles = {
        container: {
            backgroundColor: colors.content.container.default,
            borderRadius: radiuses.md
        } as Mutable<ViewStyle>,
        content: {
            paddingBottom: spaces.spacingMd,
            paddingRight: spaces.spacingMd,
            paddingLeft: spaces.spacingMd,
            paddingTop: spaces.spacingMd
        } as Mutable<ViewStyle>,
        headerContainer: {
            paddingRight: spaces.spacingMd,
            paddingLeft: spaces.spacingMd,
            paddingTop: spaces.spacingLg
        } as Mutable<ViewStyle>,
        bottomContainer: {
            paddingTop: spaces.spacingSm
        } as Mutable<ViewStyle>,
        bottomContentContainer: {
            paddingBottom: spaces.spacingMd,
            paddingRight: spaces.spacingMd,
            paddingLeft: spaces.spacingMd
        } as Mutable<ViewStyle>,
        headerTitle: {

        } as Mutable<TextStyle>,
        contentText: {

        } as Mutable<TextStyle>,
        closeIcon: {
            padding: spaces.spacingMd
        } as Mutable<ViewStyle>,
        primaryButton: {

        } as Mutable<ViewStyle>
    };

    if(variant === "yes-no") {
        styles.primaryButton.marginLeft = spaces.spacingMd;
    }

    if(isVisible === false) {
        styles.container.display = "none";
    }

    if(contentJustify === "centered") {
        styles.content.justifyContent = "center";
        styles.content.alignItems = "center";
        styles.content.display = "flex";

        styles.contentText.textAlign = "center";

        styles.headerContainer.justifyContent = "center";
        styles.headerContainer.alignItems = "center";
        styles.headerContainer.display = "flex";

        styles.headerTitle.textAlign = "center";
    }

    if(variant === "info") {
        styles.content.paddingBottom = spaces.spacingLg;
    }

    return styles;
};
export default stylesheet;