import NewButton, { NewButtonType } from "@/_health/base/new_button";
import Inputs from "@/components/input/Inputs";
import Footer from "@/components/layout/Footer";
import { ColorType, MainColorType } from "@/context/themes/color";
import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
import { update } from "@/services/user";
import { updateSuccess } from "@/store/user";
import { rpxToPx } from "@/utils/tools";
import { Input, View, Text } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { TextInput } from "react-native";
import { useDispatch, useSelector } from "react-redux";

let useNavigation;
let useRoute;

if (process.env.TARO_ENV == 'rn') {
    useRoute = require("@react-navigation/native").useRoute
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function Page() {
    let router
    if (process.env.TARO_ENV == 'rn') {
        router = useRoute()
    }
    else {
        router = useRouter()
    }
    const user = useSelector((state: any) => state.user);
    const [value, setValue] = useState('');
    const [btnDisable, setBtnDisable] = useState(false);
    const { t } = useTranslation()
    const dispatch = useDispatch();

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


    useEffect(() => {
        Taro.setNavigationBarTitle({
            title:t('health.edit_my_name')
        })
        if (process.env.TARO_ENV == 'rn') {
            setValue(router.params.name as any)

            navigation.setOptions({ title: t('page.edit_nickname.title') ?? '' });

            return
        }
        setTimeout(() => {
            setValue(router.params.name as any)

            // setValue(user.nickname)
        }, 300)
    }, [])

    const handleChange = (e) => {
        setValue(e);
    };

    function save() {
        if (value.length == 0) {
            Taro.showToast({
                title: t('feature.common.toast.input_nickname'),
                icon: 'none'
            })
            return;
        }
        setBtnDisable(true)
        update({ nickname: value }).then(res => {
            dispatch(updateSuccess({ nickname: value }));
            setBtnDisable(false)
            Taro.showToast({
                title: t('feature.common.toast.update_success'),
                icon: 'none'
            })

            setTimeout(() => {
                if (process.env.TARO_ENV == 'weapp') {
                    Taro.navigateBack()
                    console.log('edit page navi back')
                }
                else {
                    navigation.goBack()
                }
            }, 300)

        }).catch(e => {
            setBtnDisable(false)
        })
        // dispatch(update({nickname:value}).then() as any)
    }

    return <View style={{ flex: 1 }}>
        <View style={{ height: 20 }}></View>
        {/* <Input type="nickname" placeholder="请输入昵称" style={{ color: '#fff' }} value={value} onInput={handleChange} /> */}
        {
            process.env.TARO_ENV == 'weapp' ? <Inputs autoFocus placeholder={t('feature.common.toast.input_nickname')} value={value} onChange={handleChange} onConfirm={save}
                openType="nickname"
            /> :
                <Inputs autoFocus placeholder={t('feature.common.toast.input_nickname')} value={value} onChange={handleChange} onConfirm={save}
                />
        }


        <View className="cell_footer">{t('page.user_profile.nickname_footer')}</View>
        <View style={{ flex: 1 }} />
        {/* <Footer>
            <ChooseScenarioBtn disable={btnDisable} title={t('page.user_profile.save')} onClick={save} background={ColorType.fast} />
        </Footer>
        <View style={{ height: 40 }} /> */}
        <View className="main_footer">
            <NewButton
                color={MainColorType.blue}
                type={NewButtonType.fill}
                title={t('feature.common.picker_confirm_btn')}
                width={rpxToPx(646)}
                height={rpxToPx(96)}
                disable={btnDisable}
                bold={true}
                onClick={save} />
        </View>
    </View>
}