import MoreSvg from "@/assets/icons/svg/more.svg";
import { ContentPart, getMessageText, isMessageContainMedia } from "@/types/ask";
import { TFunction } from 'i18next';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import Loading from '../../ask/threeCircle';
import { ThemedText } from "../../ThemedText";
import MediaGrid from './MediaGrid';

interface MessageContentProps {
    item: any;
    isUser: boolean;
    setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
    setCancel: React.Dispatch<React.SetStateAction<boolean>>;
    cancel: boolean;
    t: TFunction;
    setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
    setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
}

const MessageContent = ({
    item,
    isUser,
    setModalVisible,
    setCancel,
    cancel,
    t,
    setSelectedImages,
    setModalDetailsVisible
}: MessageContentProps) => {
    return (
        <View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}>
            <Text className={`text-base ${isUser ? 'text-[#4C320C]' : 'text-black'} leading-6 font-semibold`}>
                {!isUser
                    ? getMessageText(item) == "keepSearchIng"
                        ? <Loading />
                        : getMessageText(item)
                    : getMessageText(item)
                }
            </Text>

            {isMessageContainMedia(item) && (
                <View className="relative">
                    {item.content instanceof Array && (() => {
                        const mediaItems = item.content.filter((media: ContentPart) => media.type !== 'text');

                        return (
                            <View className="mt-2">
                                <MediaGrid
                                    mediaItems={mediaItems}
                                    setModalVisible={setModalVisible}
                                    setCancel={setCancel}
                                    cancel={cancel}
                                    t={t}
                                />
                            </View>
                        );
                    })()}
                    {
                        (item.content instanceof Array && item.content.length > 3)
                        && <TouchableOpacity className="absolute top-1/2 -translate-y-1/2 -right-4 translate-x-1/2 bg-bgPrimary flex flex-row items-center gap-2 p-1 pl-2 rounded-full" onPress={() => {
                            setSelectedImages([])
                            setModalDetailsVisible({ visible: true, content: item.content });
                        }}>
                            <ThemedText className="!text-white font-semibold">{item.content.length}</ThemedText>
                            <View className="bg-white rounded-full p-2">
                                <MoreSvg />
                            </View>
                        </TouchableOpacity>
                    }
                </View>
            )}
        </View>
    );
};

export default MessageContent;