import Buttons from "@/components/basic/Buttons";
import { delSession } from "@/services/common";
import { clear, logout } from "@/services/user";
import { View, Text, Image, Switch } from "@tarojs/components";
import Taro, { useDidShow, useShareAppMessage } 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";
import TableCell from "@/components/layout/TableCell";
import { useEffect, useState } from "react";
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import Tabbar from "@/components/navigation/TabBar";
let useNavigation;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Page() {
    const dispatch = useDispatch();
    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    const [switchOn, setSwitchOn] = useState(false)

    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        if (process.env.TARO_ENV == 'weapp') {
            var status = Taro.getStorageSync('isDebug')
            setSwitchOn(status)
        }
    }, [])

    if (process.env.TARO_ENV == 'weapp') {
        useShareAppMessage((e) => {
            return {
                title: t('share.title'),
                path: 'pages/clock/Clock'
            }
        })
    }

    function switchChanged(e) {
        setSwitchOn(e.detail.value)
        Taro.setStorageSync('isDebug', e.detail.value)
        global.isDebug = e.detail.value
    }

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

    function reset() {
        Taro.showModal({
            title: t('feature.common.modal.reset_session_title'),
            content: t('feature.common.modal.reset_session_content'),
            success: res => {
                if (res.confirm) {
                    delSession({ type: 'WX_MP' })
                }
            }
        })

    }

    function clearF() {
        Taro.showModal({
            title: t('feature.common.modal.deluser_title'),
            content: t('feature.common.modal.deluser_content'),
            success: res => {
                if (res.confirm) {
                    dispatch(clear() as any);
                }
            }
        })
    }

    function tapProfile(e) {
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
        if (user.isLogin) {
            jumpPage('/pages/account/ProfileSetting')
        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
        }
    }

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

        }
        else {
            jumpPage('/pages/account/ChooseAuth', 'ChooseAuth', navigation)
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }
        }

    }

    function goSetting(e) {
        jumpPage('/pages/account/Setting')
        if (process.env.TARO_ENV == 'weapp') {
            e.stopPropagation()
        }
    }

    console.log(user.avatar)

    function detail() {
        return <View className="container">
            <Box>
                <View className="profile_card" onClick={tapProfile}>
                    <View className="avatar" style={{
                        opacity: user.isLogin ? 1 : 0.4,
                        background: user.isLogin ? 'transparent' : '#fff'
                    }}>
                        {
                            user.isLogin ? <Image src={user.avatar} className="avatar" mode="aspectFill" style={{
                                background: user.isLogin ? 'transparent' : '#fff'
                            }} /> : <Image src={require('@/assets/images/user.png')} className="avatar_placeholder" />
                        }
                    </View>
                    <Text className="nickname">{user.isLogin ? user.nickname : t('page.more.un_login')}</Text>
                    {/* <Text className="username">{user.isLogin ? '用户名未设置' : ''}</Text> */}
                </View>
            </Box>

            <Box>
                <View className="balance" onClick={tapBalance}>
                    <Text className="title">{t('page.more.stone')}</Text>
                    <Text className="desc">{t('page.more.stone_desc')}</Text>
                </View>
            </Box>
            {
                user.isLogin && <View onClick={goSetting}>
                    <TableCell title={t('page.more.setting')} showArrow={true} showMarginBottom={true}></TableCell>
                </View>
            }
            {/* {user.isLogin && <Box >
                <View onClick={goSetting}>
                    <Text className="title">设置</Text>
                </View>
            </Box>
            } */}

            {
                user.isLogin && user.test_user && <TableCell title="user_id" showArrow={true} onClick={clearF}>
                    <Text style={{ opacity: 0.8 }}>******{user.id.substring(user.id.length - 10, user.id.length)}</Text>
                </TableCell>
            }
            {
                user.isLogin && user.test_user && <TableCell title="session" showArrow={true} onClick={reset}>
                    <Text style={{ opacity: 0.8 }}>{t('page.more.reset_session')}</Text>
                </TableCell>
            }
            {
                user.isLogin && user.test_user && <TableCell title={t('page.more.debug_mode')} >
                    <Switch checked={switchOn} onChange={switchChanged} />
                </TableCell>
            }
            <View style={{ height: 40 }}></View>

            {/* <Text>未更改前的1px线</Text>
            <View style={{ marginLeft: 100 }}>
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
                <View className="px2Height" />
                <View className="px2Width" />
            </View>
            <Text>更改后的1px线</Text>
            <View style={{ marginLeft: 100 }}>
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
                <View className="px1Height" />
                <View className="px1Width" />
            </View>
            <Text>Svg Demo</Text>
            <View style={{ background: 'red', width: 30, height: 30 }}>
                
                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
' colors={['blue']} />
            </View>
            <View style={{ background: 'red', width: 30, height: 30 }}>
                
                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
' colors={['yellow']} />
            </View>
            <View style={{ background: 'red', width: 30, height: 30 }}>
                
                <mysvg src='<svg  t="1701751531644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3687" width="200" height="200"><path d="M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" fill="#5A626A" p-id="3548"></path></svg>
' colors={['gray']} />
            </View>
            <View style={{ height: 200,display:'flex',flexShrink:0 }} /> */}

        </View>
    }

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