import { View, Text, ScrollView, Pressable } from 'react-native';
import React, { useContext } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg, RightArrowIconSvg } from '../global/SVG';
import { AuthContext } from '../../context/AuthProvider';

const AccountSettingPageComponent = () => {
    const { user } = useContext(AuthContext);
    console.log(user);
    const genderText =
        user?.gender === 'woman'
            ? '女'
            : user?.gender === 'man'
            ? '男'
            : user?.gender;
    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView
                className="flex-1 mx-[5%]"
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                    <Text style={{ fontSize: 45, marginVertical: 25 }}>
                        帳戶管理
                    </Text>
                </View>
                <View>
                    <View className="flex-col">
                        <Pressable onPress={() => console.log('abc')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">
                                        電郵地址
                                    </Text>
                                    <Text style={{ color: '#555555' }}>
                                        {user?.email}
                                    </Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4] " />
                    </View>
                    <View className="flex-col ">
                        <Pressable
                            onPress={() => router.push('changePasswordPage')}
                        >
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">
                                        帳戶密碼
                                    </Text>
                                    <Text style={{ color: '#555555' }}>
                                        ********
                                    </Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4] " />
                    </View>
                    <View className="flex-col ">
                        <Pressable
                            onPress={() => router.push('changeNamePage')}
                        >
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">暱稱</Text>
                                    <Text style={{ color: '#555555' }}>
                                        {user?.nickname}
                                    </Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" />
                    </View>
                    <View className="flex-col ">
                        <Pressable
                            onPress={() => router.push('changeGenderPage')}
                        >
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">性別</Text>
                                    <Text style={{ color: '#555555' }}>
                                        {genderText}
                                    </Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" />
                    </View>
                    <View className="flex-col ">
                        <Pressable
                            onPress={() => router.push('changePhonePage')}
                        >
                            <View className="flex-row items-center justify-between">
                                <View className="flex-co py-4">
                                    <Text className="text-lg pb-1">
                                        電話號碼
                                    </Text>
                                    <Text style={{ color: '#555555' }}>
                                        {user?.phone
                                            ? `+852 ${user.phone}`
                                            : 'No phone number provided'}
                                    </Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AccountSettingPageComponent;