import CancelSvg from '@/assets/icons/svg/cancel.svg';
import ChatSvg from "@/assets/icons/svg/chat.svg";
import DownloadSvg from '@/assets/icons/svg/download.svg';
import MoreSvg from "@/assets/icons/svg/more.svg";
import { Message, Video } from "@/types/ask";
import { MaterialItem } from "@/types/personal-info";
import { TFunction } from "i18next";
import React from 'react';
import {
    Image,
    Pressable,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import ContextMenu from "../gusture/contextMenu";
import { ThemedText } from "../ThemedText";
import SelectModel from "./selectModel";
import SingleContentModel from "./singleContentModel";
import Loading from './threeCircle';
import { mergeArrays, saveMediaToGallery } from "./utils";

interface RenderMessageProps {
    insets: { top: number };
    item: Message;
    sessionId: string;
    setModalVisible: React.Dispatch<React.SetStateAction<{ visible: boolean, data: Video | MaterialItem }>>;
    modalVisible: { visible: boolean, data: Video | MaterialItem };
    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 ">
                <View style={{ width: "100%", flexDirection: "row", alignItems: "flex-end" }}>
                    <View
                        className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble  rounded-2xl'} border-0 ${!isUser && (item.content.video_material_infos && item.content.video_material_infos.length > 0 || item.content.image_material_infos && item.content.image_material_infos.length > 0) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'}`}
                        style={[
                            styles.messageBubble,
                            isUser ? styles.userBubble : styles.aiBubble,
                            { marginRight: item.content.text == "正在寻找，请稍等..." ? 0 : isUser ? 0 : 10 }
                        ]}
                    >
                        <View className={`${isUser ? 'bg-bgPrimary' : 'bg-aiBubble'}`}>
                            <Text style={isUser ? styles.userText : styles.aiText}>
                                {!isUser
                                    ?
                                    sessionId ? item.content.text : item.content.text == "正在寻找，请稍等..." ? <Loading /> : item.content.text
                                    : item.content.text
                                }
                            </Text>

                            {(mergeArrays(item.content.image_material_infos || [], item.content.video_material_infos || [])?.length || 0 > 0) && (
                                <View className="relative">
                                    <View style={[styles.imageGridContainer, { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }]}>
                                        {mergeArrays(item.content.image_material_infos || [], item.content.video_material_infos || [])?.slice(0, 3)?.map((image) => (
                                            <Pressable
                                                key={image?.id || image?.video?.id}
                                                onPress={() => {
                                                    setModalVisible({ visible: true, data: image });
                                                }}
                                                style={{
                                                    width: '32%',
                                                    aspectRatio: 1,
                                                    marginBottom: 8,
                                                }}
                                            >
                                                <ContextMenu
                                                    items={[
                                                        {
                                                            svg: <DownloadSvg width={20} height={20} />,
                                                            label: t("ask:ask.save"),
                                                            onPress: () => {
                                                                const imageUrl = image?.preview_file_info?.url || image.video?.preview_file_info?.url;
                                                                if (imageUrl) {
                                                                    saveMediaToGallery(imageUrl, t);
                                                                }
                                                            },
                                                            textStyle: { color: '#4C320C' }
                                                        },
                                                        {
                                                            svg: <CancelSvg width={20} height={20} color='red' />,
                                                            label: t("ask:ask.cancel"),
                                                            onPress: () => {
                                                                setCancel(true);
                                                            },
                                                            textStyle: { color: 'red' }
                                                        }
                                                    ]}
                                                    cancel={cancel}
                                                    menuStyle={{
                                                        backgroundColor: 'white',
                                                        borderRadius: 8,
                                                        padding: 8,
                                                        minWidth: 150,
                                                        shadowColor: '#000',
                                                        shadowOffset: { width: 0, height: 2 },
                                                        shadowOpacity: 0.25,
                                                        shadowRadius: 4,
                                                        elevation: 5,
                                                    }}
                                                >
                                                    <Image
                                                        source={{ uri: image?.preview_file_info?.url || image.video?.preview_file_info?.url }}
                                                        style={{
                                                            width: '100%',
                                                            height: '100%',
                                                            borderRadius: 12,
                                                        }}
                                                        resizeMode="cover"
                                                        loadingIndicatorSource={require('@/assets/images/png/placeholder.png')}
                                                    />
                                                </ContextMenu>
                                            </Pressable>
                                        ))}
                                    </View>
                                    {
                                        ((item.content.video_material_infos?.length || 0) + (item.content.image_material_infos?.length || 0)) > 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.video_material_infos?.length || 0) + (item.content.image_material_infos?.length || 0))}</ThemedText>
                                            <View className="bg-white rounded-full p-2">
                                                <MoreSvg />
                                            </View>
                                        </TouchableOpacity>
                                    }
                                </View>
                            )}
                        </View>
                    </View>
                    {
                        item.content.text == "正在寻找，请稍等..."
                        &&
                        <Text style={{ color: "d9d9d9" }}>
                            {t("ask:ask.think")}
                        </Text>
                    }
                </View>
                {/* {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;

const styles = StyleSheet.create({
    imageGridContainer: {
        flexDirection: 'row',
        flexWrap: 'nowrap',
        width: '100%',
        marginTop: 8,
    },
    video: {
        width: '100%',
        height: '100%',
    },
    imageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        maxHeight: '60%',
    },
    fullWidthImage: {
        width: '100%',
        height: "54%",
        marginBottom: 8,
    },
    gridImage: {
        aspectRatio: 1,
        marginBottom: 8,
    },
    background: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    centeredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalView: {
        borderRadius: 20,
        alignItems: 'center',
        height: '100%',
        width: "100%",
        justifyContent: 'center',
        alignSelf: 'center',
    },
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    userAvatar: {
        width: 30,
        height: 30,
        borderRadius: 15,
    },
    messageList: {
        padding: 16,
    },
    messageBubble: {
        paddingHorizontal: 16,
        paddingVertical: 12,
        fontWeight: "600"
    },
    userBubble: {
        alignSelf: 'flex-end',
        backgroundColor: '#FFB645',
        marginLeft: '20%',
    },
    aiBubble: {
        alignSelf: 'flex-start',
        backgroundColor: '#fff',
        marginRight: '20%',
        borderWidth: 1,
        borderColor: '#e5e5ea',
    },
    userText: {
        color: '#4C320C',
        fontSize: 16,
        lineHeight: 24,
    },
    aiText: {
        color: '#000',
        fontSize: 16,
        lineHeight: 24,
    },
});