ncore-ui-kit/src/components/siteLogo/index.tsx

import {
    useState
} from "react";
import {
    TouchableOpacity,
    Image,
    View
} from "react-native";
import type ISiteLogoProps from "./type";
import stylesheet, {
    getSiteLogoSize,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme
} from "../../core/hooks";
import {
    Home as HomeIcon
} from "lucide-react-native";
import Loading from "../loading";
import Text from "../text";

const SiteLogo = ({
    logoBackgroundColor = "default",
    isWorkWithFlex1 = true,
    isShowBorder = false,
    subTitleCustomColor,
    isCustomImageSize,
    isShowIcon = true,
    isWorkWithAction,
    titleCustomColor,
    image: ImageProp,
    backgroundColor,
    subTitleVariant,
    customLocalize,
    icon: IconProp,
    size = "large",
    subTitleStyle,
    subTitleColor,
    titleVariant,
    imageSource,
    customTheme,
    borderColor,
    titleStyle,
    imageSpace,
    isDisabled,
    titleColor,
    imageProps,
    isLoading,
    iconColor,
    titleKey,
    imageUrl,
    subTitle,
    onPress,
    title,
    style
}: ISiteLogoProps) => {
    const {
        borders,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext(customTheme);

    const {
        localize
    } = NCoreUIKitLocalize.useContext(customLocalize);

    const currentSize = getSiteLogoSize({
        spaces,
        size
    });

    const [
        imageLoadError,
        setImageLoadError
    ] = useState(false);

    const {
        contentContainer: contentContainerDynamicStyle,
        titlesContainer: titlesContainerDynamicStyle,
        container: containerDynamicStyle,
        image: imageDynamicStyle,
        icon: iconDynamicStyle
    } = useStyles({
        logoBackgroundColor,
        isCustomImageSize,
        image: ImageProp,
        isWorkWithFlex1,
        backgroundColor,
        isShowBorder,
        borderColor,
        currentSize,
        isDisabled,
        imageSpace,
        isLoading,
        imageUrl,
        borders,
        colors,
        spaces
    });

    const renderIcon = () => {
        if(IconProp) {
            return <IconProp
                size={currentSize.iconSize}
                customColor={iconColor}
                color="default"
                style={{
                    ...iconDynamicStyle
                }}
            />;
        }

        return <HomeIcon
            color={iconColor ? iconColor : colors.content.icon.default}
            size={currentSize.iconSize}
            style={{
                ...iconDynamicStyle
            }}
        />;
    };

    const renderLoading = () => {
        let loadingColor: keyof NCoreUIKit.IconContentColors = "default";

        if(title) {
            loadingColor = "onPrimary";
        } else if(imageUrl || ImageProp) {
            loadingColor = "mid";
        }

        return <Loading
            color={loadingColor}
        />;
    };

    const renderContent = () => {
        if(isLoading) {
            return renderLoading();
        }

        if(IconProp) {
            return renderIcon();
        }

        if(!ImageProp && !imageUrl) {
            return renderIcon();
        }

        if((imageUrl || ImageProp) && imageLoadError) {
            return renderIcon();
        }

        if(ImageProp) {
            return <ImageProp
                {...imageProps}
                onError={() => setImageLoadError(true)}
                height={currentSize.size}
                width={currentSize.size}
                style={[
                    stylesheet.image,
                    imageDynamicStyle,
                    imageProps?.style
                ]}
            />;
        }

        if(imageUrl) {
            return <Image
                {...imageProps}
                onError={() => setImageLoadError(true)}
                height={currentSize.size}
                width={currentSize.size}
                source={{
                    uri: imageUrl,
                    ...imageSource
                }}
                style={[
                    stylesheet.image,
                    imageDynamicStyle,
                    imageProps?.style
                ]}
            />;
        }

        return null;
    };

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

        return <View
            style={[
                stylesheet.titlesContainer,
                titlesContainerDynamicStyle
            ]}
        >
            <Text
                customColor={titleCustomColor ? colors.project[titleCustomColor] : undefined}
                variant={titleVariant ? titleVariant : currentSize.titleSize}
                color={titleColor ? titleColor : "high"}
                ellipsizeMode="tail"
                numberOfLines={1}
                style={{
                    width: "100%",
                    ...titleStyle
                }}
            >
                {titleKey ? localize(titleKey) : title}
            </Text>
            {
                subTitle ?
                    <Text
                        customColor={subTitleCustomColor ? colors.project[subTitleCustomColor] : undefined}
                        variant={subTitleVariant ? subTitleVariant : currentSize.subTitleSize}
                        color={subTitleColor ? subTitleColor : "low"}
                        ellipsizeMode="tail"
                        numberOfLines={1}
                        style={{
                            width: "100%",
                            ...subTitleStyle
                        }}
                    >
                        {subTitle}
                    </Text>
                    :
                    null
            }
        </View>;
    };

    const renderContentContainer = () => {
        if(!isShowIcon) {
            return null;
        }

        return <View
            style={[
                stylesheet.contentContainer,
                contentContainerDynamicStyle
            ]}
        >
            {renderContent()}
        </View>;
    };

    return <TouchableOpacity
        disabled={!isWorkWithAction || isDisabled || isLoading}
        onPress={!isWorkWithAction || isDisabled || isLoading ? undefined : () => {
            if(onPress) onPress();
        }}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
    >
        {renderContentContainer()}
        {renderTitles()}
    </TouchableOpacity>;
};
export default SiteLogo;