import {
    type FC
} from "react";
import {
    View
} from "react-native";
import type IStickerProps from "./type";
import stylesheet, {
    getStickerType,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import type {
    INCoreUIKitIconProps
} from "../../types";
import type ITextProps from "../text/type";
import Text from "../text";

const Sticker: FC<IStickerProps> = ({
    spreadBehaviour = "baseline",
    iconPosition = "left",
    type = "neutral",
    customTitleColor,
    customIconColor,
    size = "medium",
    icon: IconProp,
    customColor,
    customTheme,
    titleStyle,
    title,
    style,
    ...props
}) => {
    const {
        typography,
        radiuses,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext(customTheme);

    const currentType = getStickerType({
        type
    });

    const {
        titleContainer: titleContainerDynamicStyle,
        container: containerDynamicStyle,
        title: titleDynamicStyle,
        icon: iconDynamicStyle
    } = useStyles({
        spreadBehaviour,
        iconPosition,
        customColor,
        currentType,
        radiuses,
        spaces,
        colors,
        size
    });

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

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

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

    const renderIcon = () => {
        if(!IconProp) {
            return null;
        }

        return <IconProp
            color={iconProps.color as keyof NCoreUIKit.IconContentColors}
            size={typography[contentSize].fontSize + 4}
            style={iconDynamicStyle}
        />;
    };

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

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

    return <View
        {...props}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
    >
        {iconPosition === "left" ? renderIcon() : null}
        {renderTitle()}
        {iconPosition === "right" ? renderIcon() : null}
    </View>;
};
export default Sticker;
