import ChatSvg from "@/assets/icons/svg/chat.svg";
import { ContentPart, getMessageText, isMessageContainMedia, Message, User } from "@/types/ask";
import { TFunction } from "i18next";
import React from 'react';
import {
    StyleSheet,
    View
} from 'react-native';
import SelectModel from "../../ask/selectModel";
import SingleContentModel from "../../ask/singleContentModel";
import MessageRow from './MessageRow';

interface RenderMessageProps {
    insets: { top: number };
    item: Message;
    sessionId: string;
    setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: ContentPart }>>;
    modalVisible: { visible: boolean, data: ContentPart };
    setModalDetailsVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, content: any }>>;
    modalDetailsVisible: { visible: boolean, content: any };
    setSelectedImages: React.Dispatch<React.SetStateAction<string[]>>;
    selectedImages: string[];
    t: TFunction;
    setCancel: React.Dispatch<React.SetStateAction<boolean>>;
    cancel: boolean;
}

const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, setModalVisible, modalVisible, setModalDetailsVisible, modalDetailsVisible, setSelectedImages, selectedImages }: RenderMessageProps) => {
    const isUser = item.role === User;

    return (
        <View className={`flex-row items-start gap-2 w-full ${isUser ? 'justify-end' : 'justify-start'}`}>
            {!isUser && <ChatSvg width={36} height={36} />}
            <View className="max-w-[90%] mb-[1rem] flex flex-col gap-2 ">
                <MessageRow 
                    item={item}
                    isUser={isUser}
                    setModalVisible={setModalVisible}
                    setCancel={setCancel}
                    cancel={cancel}
                    t={t}
                    setSelectedImages={setSelectedImages}
                    setModalDetailsVisible={setModalDetailsVisible}
                />
                {/* {item.askAgain && item.askAgain.length > 0 && (
                    <View className={`mr-10`}>
                        {item.askAgain.map((suggestion, index, array) => (
                            <TouchableOpacity
                                key={suggestion.id}
                                className={`bg-yellow-50 rounded-xl px-4 py-2 border border-yellow-200 border-0 mb-2 ${index === array.length - 1 ? 'mb-0 rounded-b-3xl rounded-t-2xl' : 'rounded-2xl'}`}
                            >
                                <Text className="text-gray-700">{suggestion.text}</Text>
                            </TouchableOpacity>
                        ))}
                    </View>
                )} */}
                {/* 单个图片弹窗 */}
                <SingleContentModel modalVisible={modalVisible} setModalVisible={setModalVisible} />
                {/* 全部图片详情弹窗 */}
                <SelectModel
                    modalDetailsVisible={modalDetailsVisible}
                    setModalDetailsVisible={setModalDetailsVisible}
                    insets={insets}
                    setSelectedImages={setSelectedImages}
                    selectedImages={selectedImages}
                    t={t}
                    setCancel={setCancel}
                    cancel={cancel}
                />
            </View>
        </View>
    );
};

export default MessageItem;