import { getMessageText, isMessageContainMedia } from "@/types/ask";
import React from 'react';
import { View } from 'react-native';
import MessageContent from "./MessageContent";

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

const MessageBubble = ({
    item,
    isUser,
    setModalVisible,
    setCancel,
    cancel,
    t,
    setSelectedImages,
    setModalDetailsVisible
}: MessageBubbleProps) => {
    return (
        <View
            className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble  rounded-2xl'} border-0 ${!isUser && isMessageContainMedia(item) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'} px-3`}
            style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }}
        >
            <MessageContent
                item={item}
                isUser={isUser}
                setModalVisible={setModalVisible}
                setCancel={setCancel}
                cancel={cancel}
                t={t}
                setSelectedImages={setSelectedImages}
                setModalDetailsVisible={setModalDetailsVisible}
            />
        </View>
    );
};

export default React.memo(MessageBubble);
