import Buttons from "@/components/Buttons";
import { delSession } from "@/services/common";
import { clear, logout } from "@/services/user";
import { View, Text,Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useDispatch, useSelector } from "react-redux";
import './Profile.scss'

export default function Page() {
    const dispatch = useDispatch();
    const user = useSelector((state: any) => state.user);

    

    function tapLogin() {
        Taro.navigateTo({
            url: '/pages/ChooseAuth'
        })
    }

    function reset() {
        delSession({ type: 'WX_MP' })
    }

    function tapProfile() {
        if (user.isLogin){
            Taro.navigateTo({
                url: '/pages/ProfileSetting'
            })
        }
        else {
            Taro.navigateTo({
                url: '/pages/ChooseAuth'
            })
        }
    }

    function tapBalance() {
        if (user.isLogin){

        }
        else {
            Taro.navigateTo({
                url: '/pages/ChooseAuth'
            })
        }
        
    }

    function goSetting(){
        Taro.navigateTo({
            url: '/pages/Setting'
        })
    }

    return <View className="container">
        <View style={{height:20}}/>
        <View className="profile_card card" onClick={tapProfile}>
            <View className="avatar" style={{ opacity: user.isLogin ? 1 : 0.4 }}>
                {
                    user.isLogin?<Image src={user.avatar} className="avatar" />:<Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
                }
            </View>
            <Text className="nickname">{user.isLogin ? user.nickname : '未登录'}</Text>
            <Text className="username">{user.isLogin ? '用户名未设置' : ''}</Text>
        </View>
        <View  className="card" onClick={tapBalance}>
            <Text className="title">逆龄石</Text>
            <Text className="desc">{'会员体系升级中，期间指标记录限时免逆龄石记录\n敬请期待'}</Text>
        </View>
        {user.isLogin && <View className="card" onClick={goSetting}>
            <Text className="title">设置</Text>
        </View>}
        {/* {
            user.isLogin && <Text>用户名：{user.nickname}</Text>
        }
        {
            user.isLogin && <Text>id：{user.id}</Text>
        }
        
        {
            user.isLogin && <Buttons title='重置session' onClick={reset} style={{ width: 289, marginBottom: 30 }} />
        } */}

    </View>
}