import Buttons from "@/components/basic/Buttons";
import Footer from "@/components/layout/Footer";
import TableCell from "@/components/layout/TableCell";
import { ColorType } from "@/context/themes/color";
import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
import { clear, logout } from "@/services/user";
import { logoutSuccess } from "@/store/user";
import { View, Text, Button } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";

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);
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        Taro.setNavigationBarTitle({
            title: t('page.setting.title')
        })
    }, [])
    function logoutF() {

        Taro.showModal({
            title: t('feature.common.modal.logout_title'),
            content: t('feature.common.modal.logout_content'),
            success: res => {
                if (res.confirm) {
                    logout().then(res => {
                        dispatch(logoutSuccess())
                        if (process.env.TARO_ENV == 'weapp') {
                            Taro.switchTab({
                                url: '/pages/clock/Clock'
                            })
                            Taro.navigateBack();
                            console.log('setting navi back')
                        }
                        else {
                            navigation.goBack()
                        }
                    })
                    // dispatch(logout() as any);
                }

                // if (process.env.TARO_ENV == 'rn'){
                //     setTimeout(()=>{
                //         navigation.goBack()
                //     },1000)
                // }
            }
        })

    }

    return <View style={{ color: '#fff', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <View style={{ height: 20 }} />
        <TableCell title={t('page.setting.version')} ><Text style={{ opacity: 0.8, color: '#fff' }}>{process.env.TARO_ENV == 'weapp'?'1.3.9':'1.3.3'}</Text></TableCell>
        {/* <Text style={{color:'#9E9E9E',textAlign:'center',fontSize:14}}>v1.2.2</Text> */}
        {
            process.env.TARO_ENV == 'rn' && <View style={{ flex: 1 }} />
        }

        <Footer>
            <ChooseScenarioBtn title={t('page.setting.logout')} onClick={logoutF} background={ColorType.fast} />
        </Footer>
        {
            process.env.TARO_ENV == 'rn' && <View style={{ height: 50 }} />
        }
        {/* <Buttons title='退出登录' onClick={logoutF} btnStyle={{ width: 289, marginBottom: 30 }} /> */}

        {/* {
            user.test_user && <Buttons title='注销账号' onClick={clearF} btnStyle={{ width: 289, marginBottom: 30 }} />
        } */}


    </View>
}