import {
    type TextStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import {
    type ChipDynamicStyleType,
    type ChipTypeConstantType,
    type ChipTypes,
    type ChipType
} from "./type";
import type {
    Mutable
} from "../../types";

export const CHECK_BOX_TYPE_STYLES: Record<
    ChipType,
    {
        containerColor: keyof NCoreUIKit.ContainerContentColors;
        titleColor: keyof NCoreUIKit.TextContentColors;
        iconColor: keyof NCoreUIKit.IconContentColors;
    }
> = {
    primary: {
        containerColor: "mid",
        titleColor: "mid",
        iconColor: "mid"
    },
    danger: {
        containerColor: "danger",
        titleColor: "danger",
        iconColor: "danger"
    },
    success: {
        containerColor: "success",
        titleColor: "success",
        iconColor: "success"
    },
    warning: {
        containerColor: "warning",
        titleColor: "warning",
        iconColor: "warning"
    },
    info: {
        containerColor: "info",
        titleColor: "info",
        iconColor: "info"
    },
    neutral: {
        containerColor: "mid",
        titleColor: "mid",
        iconColor: "mid"
    }
};

export const getChipType = ({
    type
}: ChipTypeConstantType): ChipTypes => {
    const currentType = CHECK_BOX_TYPE_STYLES[type];

    return currentType;
};

const stylesheet = StyleSheet.create({
    container: {
        backgroundColor: "transparent",
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
        position: "relative"
    },
    titleContainer: {
        justifyContent: "flex-start",
        flexDirection: "row",
        alignItems: "center"
    },
    title: {
        textAlign: "center",
        zIndex: 99,
        margin: 0
    },
    overlay: {
        position: "absolute",
        display: "none",
        zIndex: 98,
        bottom: 0,
        right: 0,
        left: 0,
        top: 0
    }
});

export const useStyles = ({
    displayBehaviourWhileLoading,
    spreadBehaviour,
    customColor,
    currentType,
    isClosable,
    isDisabled,
    isLoading,
    radiuses,
    spaces,
    colors,
    size,
    type
}: ChipDynamicStyleType) => {
    const styleType = type === "danger" ? "error" : type;

    const styles = {
        container: {
            paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,
            paddingVertical: size === "small" ? spaces.spacingXs : spaces.spacingSm,
            backgroundColor: colors.content.container[currentType.containerColor],
            borderRadius: radiuses.chip
        } as Mutable<ViewStyle>,
        titleContainer: {
        } as Mutable<ViewStyle>,
        title: {
        } as Mutable<TextStyle>,
        icon: {
            marginRight: spaces.spacingXs
        } as Mutable<ViewStyle>,
        close: {
            marginLeft: spaces.spacingXs
        } as Mutable<ViewStyle>,
        loading: {
        } as Mutable<ViewStyle>,
        overlay: {
        } as Mutable<ViewStyle>
    };

    if(customColor) {
        styles.container.backgroundColor = colors.content.container[customColor];
    }

    if(isClosable) {
        styles.container.paddingHorizontal = 0;

        styles.container.paddingLeft = size === "small" ? spaces.spacingSm : spaces.spacingMd;
        styles.container.paddingRight = spaces.spacingSm;
    }

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

    if(isLoading) {
        if(displayBehaviourWhileLoading === "disabled") {
            styles.overlay.display = "flex";

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

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

        styles.titleContainer.marginLeft = spaces.spacingXs;
    }

    if (isDisabled) {
        styles.container.borderColor = colors.system.state.overlay.disabled[styleType];

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

    return styles;
};
export default stylesheet;
