import showActionSheet from "@/components/basic/ActionSheet";
import showAlert from "@/components/basic/Alert";
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 { APP_VERSION, WX_VERSION } from "@/services/http/api";
import { clear, logout } from "@/services/user";
import { logoutSuccess } from "@/store/user";
import { kIsAndroid } from "@/utils/tools";
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,useActionSheet;
if (process.env.TARO_ENV == 'rn') {
    useNavigation = require("@react-navigation/native").useNavigation
    useActionSheet = require('@expo/react-native-action-sheet').useActionSheet
}

let hasCache = false;

export default function Page() {
    const dispatch = useDispatch();
    const { t } = useTranslation()
    const user = useSelector((state: any) => state.user);
    let showActionSheetWithOptions;
    if (process.env.TARO_ENV == 'rn') {
        showActionSheetWithOptions = useActionSheet()
    }
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    useEffect(() => {
        Taro.setNavigationBarTitle({
            title: t('page.setting.title')
        })

        if (process.env.TARO_ENV == 'rn') {
            navigation.setOptions({ title: t('page.setting.title') ?? '' });
        }

        Taro.getStorage({ key: 'notification' }).then(res => {
            hasCache = true;
        })
    }, [])

    async function getStorage(key: string) {
        try {
            const res = await Taro.getStorage({ key });
            return res.data;
        } catch {
            return '';
        }
    }

    async function logoutF() {
        // var showDayRing = await getStorage('showedDisqualifiedAlert') || false;
        showAlert({
            title: t('feature.common.modal.logout_title'),
            content: t('feature.common.modal.logout_content'),
            showCancel: true,
            confirm: () => {
                logout().then(res => {
                    dispatch(logoutSuccess())

                    if (hasCache) {
                        Taro.setStorage({
                            key: 'notification',
                            data: true
                        })
                    }

                    if (process.env.TARO_ENV == 'rn') {
                        var Jto = require('react-native').NativeModules.NativeBridge;
                        Jto.clearNotification()

                    }

                    // if (showDayRing) {
                    //     Taro.setStorage({
                    //         key: 'showedDisqualifiedAlert',
                    //         data: true
                    //     })
                    // }

                    if (process.env.TARO_ENV == 'weapp') {
                        Taro.switchTab({
                            url: '/pages/clock/Clock'
                        })
                        //check
                        //退出到首页后，点击登录，会再次执行naviback函数
                        // Taro.navigateBack();
                        console.log('setting navi back')
                    }
                    else {
                        navigation.goBack()
                    }
                }).catch((e) => {

                })
            }
        })

    }

    function del(){
        showActionSheet({
            title:t('feature.common.modal.deluser_action_title'),
            showActionSheetWithOptions: showActionSheetWithOptions,
            itemList: [t('feature.common.modal.deluser_action_confirm')],
            success: (res) => {
                switch (res) {
                    case 0:
                        {
                            showAlert({
                                title: t('feature.common.modal.deluser_title'),
                                content: t('feature.common.modal.deluser_content'),
                                showCancel: true,
                                cancelText:t('feature.common.modal.deluser_cancel'),
                                confirmText:t('feature.common.modal.deluser_confirm'),
                                redConfirm:true,
                                confirm: () => {
                                    delUser()
                                }
                            })
                        }
                        break;
                }
            }
        })
    }

    function delUser(){
        dispatch(clear() as any);
        setTimeout(()=>{
            navigation.goBack()
        },1500)
    }

    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' ? WX_VERSION : APP_VERSION}</Text></TableCell>
        {/* <Text style={{color:'#9E9E9E',textAlign:'center',fontSize:14}}>v1.2.2</Text> */}
        {
            process.env.TARO_ENV == 'rn' && <View style={{ flex: 1 }} />
        }

        <Footer>
            <View>
                <ChooseScenarioBtn title={t('page.setting.logout')} onClick={logoutF} background={ColorType.fast} />
                <View style={{display:'flex',alignItems:'center',justifyContent:'center',marginTop:20}}>
                    <Text onClick={del} style={{color:'#fff',opacity:0.4}}>{t('feature.common.modal.del')}</Text>
                </View>
            </View>
        </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>
}