import { ThemedText } from "@/components/ThemedText";
import { Message } from "@/types/ask";
import { Dispatch, SetStateAction, useCallback, useRef } from "react";
import { useTranslation } from "react-i18next";
import { View } from 'react-native';

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 { width, height } = useWindowDimensions();

    // 
    const inFlightRef = useRef(false);

    const handleCase = useCallback(async (text: string) => {
        //     if (inFlightRef.current) return;
        //     inFlightRef.current = true;
        //     try {
        //         // UI
        //         setIsHello(false);
        //         // setUserMessages([
        //         //     {
        //         //         id: Math.random().toString(36).substring(2, 9),
        //         //         content: text,
        //         //         role: 'user',
        //         //         timestamp: new Date().toISOString()
        //         //     },
        //         //     {
        //         //         id: Math.random().toString(36).substring(2, 9),
        //         //         content: "keepSearchIng",
        //         //         role: 'assistant',
        //         //         timestamp: new Date().toISOString()
        //         //     }
        //         // ]);

        //         const sessionId = await createNewConversation(text);
        //         if (!sessionId) {
        //             console.error("Failed to create a new conversation.");
        //             // 
        //             // setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
        //             return;
        //         }

        //         setConversationId(sessionId);
        //         // try {
        //         //     if (webSocketManager && typeof (webSocketManager as any).send === 'function') {
        //         //         (webSocketManager as any).send({
        //         //             type: 'Chat',
        //         //             session_id: sessionId,
        //         //             message: text
        //         //         });
        //         //     } else {
        //         //         throw new Error('WebSocket manager is not ready');
        //         //     }
        //         // } catch (wsErr) {
        //         //     console.error('WebSocket send failed:', wsErr);
        //         //     // 
        //         //     setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
        //         // }
        //     } catch (err) {
        //         console.error('handleCase failed:', err);
        //         // 
        //         // setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
        //     } finally {
        //         inFlightRef.current = false;
        //     }
    }, [setConversationId, setIsHello, setUserMessages]);

    return (
        <View className="flex-1 bg-white w-full">
            {/* <ScrollView
                contentContainerStyle={{
                    flexGrow: 1,
                    paddingHorizontal: 8,
                    paddingBottom: 20
                }}
                keyboardDismissMode="interactive"
                keyboardShouldPersistTaps="handled"
            > */}
            <View className="items-center">
                <ThemedText style={{ fontSize: 32, fontWeight: 'bold', textAlign: 'center', lineHeight: 40, }}>
                    {t('ask.hi', { ns: 'ask' })}
                    {"\n"}
                    {t('ask.iAmMemo', { ns: 'ask' })}
                </ThemedText>
                {/* <View>
                    <Image source={require('@/assets/images/png/icon/ip.png')} style={{ width: width * 0.5, height: height * 0.3 }} />
                </View> */}
                <ThemedText className="!text-textPrimary text-center -mt-10" style={{ fontSize: 16 }}>
                    {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',
//         width: '100%',
//         marginTop: 16
//     },
//     case: {
//         borderWidth: 1,
//         borderColor: "#AC7E35",
//         borderRadius: 10,
//         paddingHorizontal: 8,
//         marginHorizontal: 4,
//         marginVertical: 4,
//         width: 'auto',
//         fontSize: 14,
//         color: "#4C320C"
//     }
// })