import {
    type TextStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import {
    type StateCardDynamicStyleType,
    type StateCardTypeConstantType,
    type StateCardTypes,
    type StateCardType
} from "./type";
import type {
    Mutable
} from "../../types";

export const CHECK_BOX_TYPE_STYLES: Record<
    StateCardType,
    {
        containerColor: keyof NCoreUIKit.ContainerContentColors;
        subTitleColor: keyof NCoreUIKit.TextContentColors;
        titleColor: keyof NCoreUIKit.TextContentColors;
        iconColor: keyof NCoreUIKit.IconContentColors;
    }
> = {
    primary: {
        iconColor: "emphasized",
        containerColor: "mid",
        subTitleColor: "low",
        titleColor: "mid"
    },
    danger: {
        subTitleColor: "dangerLow",
        containerColor: "danger",
        titleColor: "danger",
        iconColor: "danger"
    },
    success: {
        subTitleColor: "successLow",
        containerColor: "success",
        titleColor: "success",
        iconColor: "success"
    },
    warning: {
        subTitleColor: "warningLow",
        containerColor: "warning",
        titleColor: "warning",
        iconColor: "warning"
    },
    info: {
        subTitleColor: "infoLow",
        containerColor: "info",
        titleColor: "info",
        iconColor: "info"
    },
    neutral: {
        iconColor: "emphasized",
        containerColor: "mid",
        subTitleColor: "low",
        titleColor: "mid"
    }
};

export const getStateCardType = ({
    type
}: StateCardTypeConstantType): StateCardTypes => {
    const currentType = CHECK_BOX_TYPE_STYLES[type];

    return currentType;
};

const stylesheet = StyleSheet.create({
    container: {
        backgroundColor: "transparent",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center"
    },
    titleContainer: {
        justifyContent: "flex-start",
        flexDirection: "row",
        alignItems: "center"
    },
    title: {
        textAlign: "center",
        margin: 0
    },
    subTitle: {
        textAlign: "center"
    }
});

export const useStyles = ({
    spaces
}: StateCardDynamicStyleType) => {
    const styles = {
        container: {
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        titleContainer: {
        } as Mutable<ViewStyle>,
        icon: {
            marginBottom: spaces.spacingXs,
            marginTop: spaces.spacingXs
        },
        title: {
            marginBottom: spaces.spacingXs,
            marginTop: spaces.spacingXs
        } as Mutable<TextStyle>,
        subTitle: {
            marginBottom: spaces.spacingXs,
            marginTop: spaces.spacingXs
        } as Mutable<TextStyle>,
        actionButton: {
            marginBottom: spaces.spacingXs,
            marginTop: spaces.spacingXs
        } as Mutable<ViewStyle>
    };

    return styles;
};
export default stylesheet;
