import ChatSvg from "@/assets/icons/svg/chat.svg";
import { ContentPart, Message, User } from "@/types/ask";
import { TFunction } from "i18next";
import React from 'react';
import {
    StyleSheet,
    TouchableOpacity,
    View
} from 'react-native';

import { ThemedText } from "@/components/ThemedText";
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;
    setUserMessages: React.Dispatch<React.SetStateAction<Message[]>>;
}

const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, setModalVisible, modalVisible, setModalDetailsVisible, modalDetailsVisible, setSelectedImages, selectedImages, setUserMessages }: 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-[85%] 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.content instanceof Array && item.content.filter((media: ContentPart) => media.type !== 'text').length > 0 && (
                    <View style={styles.tips}>
                        <TouchableOpacity style={[styles.tip, { borderRadius: 16 }]} onPress={() => {

                        }}>
                            <ThemedText style={styles.tipText}>Help me create a warm, cozy video.</ThemedText>
                        </TouchableOpacity>
                        <TouchableOpacity style={[styles.tip, { borderTopLeftRadius: 16, borderTopRightRadius: 16, borderBottomLeftRadius: 24, borderBottomRightRadius: 24 }]}>
                            <ThemedText style={styles.tipText}>Help me find materials for subsequent operations.</ThemedText>
                        </TouchableOpacity>
                    </View>
                )}
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    tips: {
        flexDirection: 'column',
        gap: 5,
        marginRight: 10,
    },
    tip: {
        backgroundColor: '#FFF8DE',
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    tipText: {
        color: '#4C320C',
        fontSize: 14
    }
});

export default React.memo(MessageItem);