import IP from "@/assets/icons/svg/ip.svg";
import { ThemedText } from "@/components/ThemedText";
import { Message } from "@/types/ask";
import { Dispatch, SetStateAction } from "react";
import { useTranslation } from "react-i18next";
import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { createNewConversation, getConversation } from "./utils";

interface AskHelloProps {
    setUserMessages: Dispatch<SetStateAction<Message[]>>;
    setConversationId: Dispatch<SetStateAction<string | null>>;
    setIsHello: Dispatch<SetStateAction<boolean>>;
}
export default function AskHello({ setUserMessages, setConversationId, setIsHello }: AskHelloProps) {
    const { t } = useTranslation();

    const handleCase = async (text: string) => {
        setIsHello(false)
        setUserMessages([
            {
                content: {
                    text: text
                },
                role: 'User',
                timestamp: new Date().toISOString()
            },
            {
                content: {
                    text: "正在寻找，请稍等..."
                },
                role: 'Assistant',
                timestamp: new Date().toISOString()
            }
        ]);
        const data = await createNewConversation(text);
        setConversationId(data);
        const response = await getConversation({ session_id: data, user_text: text, material_ids: [] });
        setUserMessages((prev: Message[]) => {
            const newMessages = [...(prev || [])];
            if (response) {
                newMessages.push(response);
            }
            return newMessages.filter((item: Message) =>
                item?.content?.text !== '正在寻找，请稍等...'
            );
        });
    }
    return (
        <View className="flex-1 bg-white w-full">
            <ScrollView
                contentContainerStyle={{
                    flexGrow: 1,
                    paddingHorizontal: 16,
                    paddingBottom: 20
                }}
                keyboardDismissMode="interactive"
                keyboardShouldPersistTaps="handled"
            >
                <View className="items-center">
                    <ThemedText className="text-3xl font-bold text-center">
                        {t('ask.hi', { ns: 'ask' })}
                        {"\n"}
                        {t('ask.iAmMemo', { ns: 'ask' })}
                    </ThemedText>
                    <View className="-mt-10">
                        <IP />
                    </View>
                    <ThemedText className="!text-textPrimary text-center -mt-20">
                        {t('ask.ready', { ns: 'ask' })}
                        {"\n"}
                        {t('ask.justAsk', { ns: 'ask' })}
                    </ThemedText>
                    <View style={styles.caseContainer}>
                        <TouchableOpacity onPress={() => {
                            handleCase(t('ask:ask.case1'));
                        }}>
                            <ThemedText style={styles.case}>
                                {t('ask:ask.case1')}
                            </ThemedText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            handleCase(t('ask:ask.case2'));
                        }}>
                            <ThemedText style={styles.case}>
                                {t('ask:ask.case2')}
                            </ThemedText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {
                            handleCase(t('ask:ask.case3'));
                        }}>
                            <ThemedText style={styles.case}>
                                {t('ask:ask.case3')}
                            </ThemedText>
                        </TouchableOpacity>
                    </View>
                </View>
            </ScrollView>
        </View>
    );
}


const styles = StyleSheet.create({
    caseContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: 8,
        width: '100%',
        marginTop: 16
    },
    case: {
        borderWidth: 2,
        borderColor: "#FFB645",
        borderRadius: 24,
        paddingHorizontal: 8,
        width: 'auto'
    }
})