import {
    type FC
} from "react";
import {
    TouchableOpacity,
    View
} from "react-native";
import type IChipProps from "./type";
import stylesheet, {
    getChipType,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import type {
    INCoreUIKitIconProps
} from "../../types";
import type ITextProps from "../text/type";
import {
    X as XIcon
} from "lucide-react-native";
import Text from "../text";
import Loading from "../loading";

const Chip: FC<IChipProps> = ({
    displayBehaviourWhileLoading = "disabled",
    spreadBehaviour = "baseline",
    isClosable = true,
    type = "neutral",
    customTitleColor,
    customIconColor,
    size = "medium",
    icon: IconProp,
    customColor,
    customTheme,
    titleStyle,
    isDisabled,
    isLoading,
    onPress,
    title,
    style,
    ...props
}) => {
    const {
        typography,
        radiuses,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext(customTheme);

    const currentType = getChipType({
        type
    });

    const {
        titleContainer: titleContainerDynamicStyle,
        container: containerDynamicStyle,
        loading: loadingDynamicStyle,
        overlay: overlayDynamicStyle,
        close: closeDynamicStyle,
        title: titleDynamicStyle,
        icon: iconDynamicStyle
    } = useStyles({
        displayBehaviourWhileLoading,
        spreadBehaviour,
        customColor,
        currentType,
        isDisabled,
        isClosable,
        isLoading,
        radiuses,
        spaces,
        colors,
        size,
        type
    });

    const iconProps: INCoreUIKitIconProps = {
        color: customIconColor ? customIconColor : currentType.iconColor
    };

    const titleProps: ITextProps = {
        color: customTitleColor ? customTitleColor : currentType.titleColor
    };

    if (isDisabled || (displayBehaviourWhileLoading === "disabled" && isLoading)) {
        const stateType = type === "danger" ? "error" : type;

        titleProps.customColor = colors.system.state.content.disabled[stateType];
        iconProps.customColor = colors.system.state.content.disabled[stateType];
    }

    const contentSize = size === "large" ? "bodyLargeSize" : size === "medium" ? "bodyMediumSize" : "bodySmallSize";

    const renderIcon = () => {
        const iconSize = typography[contentSize].fontSize + 4;

        if(isLoading) {
            return <Loading
                {...iconProps}
                style={loadingDynamicStyle}
                size={iconSize}
            />;
        }

        if(!IconProp) {
            return null;
        }

        return <IconProp
            {...iconProps}
            color={iconProps.color as keyof NCoreUIKit.IconContentColors}
            style={iconDynamicStyle}
            size={iconSize}
        />;
    };

    const renderTitle = () => {
        if (!title) {
            return null;
        }

        return <View
            style={[
                stylesheet.titleContainer,
                titleContainerDynamicStyle
            ]}
        >
            <Text
                style={[
                    titleStyle,
                    stylesheet.title,
                    titleDynamicStyle
                ]}
                variant={contentSize}
                {...titleProps}
            >
                {title}
            </Text>
        </View>;
    };

    const renderClose = () => {
        if(!isClosable) {
            return null;
        }

        return <XIcon
            color={isDisabled || (displayBehaviourWhileLoading && isLoading) ? colors.content.icon.disabled : type === "neutral" ? colors.content.icon.low : colors.content.icon[type === "primary" ? "onPrimary" : type]}
            size={typography[contentSize].fontSize + 4}
            style={closeDynamicStyle}
        />;
    };

    const renderOverlay = () => {
        return <View
            style={[
                stylesheet.overlay,
                overlayDynamicStyle
            ]}
        />;
    };

    return <TouchableOpacity
        {...props}
        disabled={isDisabled || isLoading}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
        onPress={isDisabled || isLoading ? undefined : () => {
            if(onPress) onPress();
        }}
    >
        {renderIcon()}
        {renderTitle()}
        {renderClose()}
        {renderOverlay()}
    </TouchableOpacity>;
};
export default Chip;
