import Buttons from "@/components/basic/Buttons";
import { delSession } from "@/services/common";
import { clear, logout } from "@/services/user";
import { View, Text, Image } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { useDispatch, useSelector } from "react-redux";
import './Profile.scss'
import Box from "@/components/layout/Box";
import { BoxType, NaviBarTitleShowType, TemplateType } from "@/utils/types";
import Layout from "@/components/layout/layout";
import { useTranslation } from "react-i18next";

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

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

    useDidShow(() => {
        global.updateTab(3)
    })

    function reset() {
        Taro.showModal({
            title: '重置session',
            content: '确认重置session吗？',
            success: res => {
                if (res.confirm) {
                    delSession({ type: 'WX_MP' })
                }
            }
        })

    }

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

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

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

    }

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

    function detail() {
        return <View className="container">
            <View style={{ height: 20 }} />
            <Box type={BoxType.outline}>
                <View className="profile_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>
            </Box>

            <Box type={BoxType.outline}>
                <View className="balance" onClick={tapBalance}>
                    <Text className="title">逆龄石</Text>
                    <Text className="desc">{'会员体系升级中，期间指标记录限时免逆龄石记录\n敬请期待'}</Text>
                </View>
            </Box>
            {user.isLogin && <Box type={BoxType.outline}>
                <View onClick={goSetting}>
                    <Text className="title">设置</Text>
                </View>
            </Box>
            }
            {
                user.isLogin && user.test_user && <Text>用户名：{user.nickname}</Text>
            }
            {
                user.isLogin && user.test_user && <Text>id：{user.id}</Text>
            }

            {
                user.isLogin && user.test_user && <Buttons title='重置session' onClick={reset} btnStyle={{ width: 289, marginBottom: 30 }} />
            }

        </View>
    }

    return <Layout title={t('page.more.title')}
        titleShowStyle={NaviBarTitleShowType.scrollToShow} type={TemplateType.flex}>
        {
            detail()
        }
    </Layout>;
}