import {
    Fragment
} from "react";
import {
    TouchableOpacity,
    View
} from "react-native";
import type IAvatarProps from "./type";
import stylesheet, {
    getAvatarGroupSize,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import {
    UserRound as UserRoundIcon
} from "lucide-react-native";
import Loading from "../loading";
import Avatar from "../avatar";
import Text from "../text";

const AvatarGroup = ({
    titleAbbreviationType = "first-last",
    isShowStatusIndicatorSplicer = true,
    avatarBackgroundColor = "default",
    isStatusIndicator,
    isWorkWithAction,
    size = "medium",
    borderColor,
    customTheme,
    isDisabled,
    imageProps,
    isLoading,
    avatars,
    onPress,
    style
}: IAvatarProps) => {
    const {
        borders,
        colors
    } = NCoreUIKitTheme.useContext(customTheme);

    const currentSize = getAvatarGroupSize({
        size
    });

    const currentAvatars = avatars && avatars.length > 2 ? avatars?.slice(0, 2) : avatars;

    const {
        moreAvatarsContainer: moreAvatarsContainerDynamicStyle,
        iconContainer: iconContainerDynamicStyle,
        container: containerDynamicStyle,
        avatar: avatarDynamicStyle,
        icon: iconDynamicStyle
    } = useStyles({
        avatarBackgroundColor,
        currentSize,
        borderColor,
        isDisabled,
        isLoading,
        avatars,
        borders,
        colors
    });

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

        return <UserRoundIcon
            color={colors.content.icon.default}
            size={currentSize.iconSize}
            style={{
                ...iconDynamicStyle
            }}
        />;
    };

    const renderLoading = () => {
        return <Loading
            color="default"
        />;
    };

    const renderAvatars = () => {
        if(!currentAvatars || !currentAvatars.length) {
            return null;
        }

        return currentAvatars.map((avatarItem, avatarIndex) => {
            return <Avatar
                {...avatarItem}
                isShowStatusIndicatorSplicer={isShowStatusIndicatorSplicer}
                titleAbbreviationType={titleAbbreviationType}
                avatarBackgroundColor={avatarBackgroundColor}
                isStatusIndicator={isStatusIndicator}
                isWorkWithAction={undefined}
                borderColor={borderColor}
                customTheme={customTheme}
                imageProps={imageProps}
                isShowBorder={true}
                onPress={undefined}
                isDisabled={false}
                isLoading={false}
                size={size}
                style={{
                    ...avatarDynamicStyle,
                    ...avatarItem.style,
                    transform: [{
                        translateX: avatarIndex === 0 ? currentSize.size / 3 : 0
                    }]
                }}
            />;
        });
    };

    const renderMoreAvatars = () => {
        if(!avatars) {
            return null;
        }

        if(avatars.length < 3) {
            return null;
        }

        return <View
            style={[
                stylesheet.moreAvatarsContainer,
                moreAvatarsContainerDynamicStyle
            ]}
        >
            <Text
                variant="labelLargeSize"
                color="mid"
            >
                +{avatars.length - 2}
            </Text>
        </View>;
    };

    const renderContent = () => {
        return <Fragment>
            {renderAvatars()}
            <View
                style={[
                    stylesheet.iconContainer,
                    iconContainerDynamicStyle
                ]}
            >
                {renderIcon()}
            </View>
            {renderMoreAvatars()}
        </Fragment>;
    };

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