import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { useAuth } from '@/contexts/auth-context';
import { fetchApi } from '@/lib/server-api-util';
import { store } from '@/store';
import { User } from '@/types/user';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { TouchableOpacity, View } from 'react-native';

export default function HomeScreen() {
    const { login } = useAuth();
    const token = store.getState().auth.token;
    console.log(token);
    const { t } = useTranslation();
    const handleApi = () => {
        fetchApi('/iam/login/password-login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                account: "jinyaqiu@fairclip.cn",
                password: "111111",
            }),
        })
            .then((data) => {
                login(data as User, data.access_token || '')
            })
            .catch((err) => console.log(err));
        // fetch('http://192.168.31.42/api/v1/iam/login/password-login', {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json',
        //     },
        //     body: JSON.stringify({
        //         account: "jinyaqiu@fairclip.cn",
        //         password: "111111",
        //     }),
        // })
        //     .then((res) => res.json())
        //     .then((data) => console.log(data))
        //     .catch((err) => console.log(err));
    }
    return (
        <ThemedView className="flex-1 bg-beige">
            <View className="flex-1 items-center pt-[60px] px-5">
                <ThemedText className="text-3xl font-bold mb-8 text-saddlebrown" onPress={handleApi}>
                    {t('title', { ns: "example" })}
                </ThemedText>

                <View className="mb-8 items-center">
                    <View className="w-[150px] h-[150px] rounded-full bg-white/80 justify-center items-center border-8 border-saddlebrown shadow-lg">
                        <View className="items-center">
                            <Ionicons name="person" size={60} color="#8B4513" />
                            <ThemedText className="mt-1 text-lg font-semibold text-saddlebrown">
                                MeMo
                            </ThemedText>
                        </View>
                    </View>
                </View>

                <ThemedText className="text-base text-center mb-10 text-saddlebrown px-5 leading-6">
                    Ready to wake up your memories? Just ask! Let MeMo bring them back to life!
                </ThemedText>

                <TouchableOpacity
                    className="w-20 h-20 rounded-full bg-white/90 justify-center items-center mb-8 shadow-lg"
                >
                    <Ionicons name="mic" size={32} color="#8B0000" />
                </TouchableOpacity>

                <View className="w-full items-center mt-auto mb-8">
                    <View className="h-px w-4/5 bg-saddlebrown/50 mb-4" />
                    <ThemedText className="text-center text-saddlebrown text-sm">
                        <ThemedText className="font-bold text-darkred">Explore More</ThemedText> Memory Reel Made Just For You!
                    </ThemedText>
                </View>
            </View>
        </ThemedView >
    );
}