import Inputs from "@/components/input/Inputs";
import Footer from "@/components/layout/Footer";
import { ColorType } from "@/context/themes/color";
import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
import { update } from "@/services/user";
import { updateSuccess } from "@/store/user";
import { Input, View, Text } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";

export default function Page() {

    const user = useSelector((state: any) => state.user);
    const [value, setValue] = useState('');
    const [btnDisable, setBtnDisable] = useState(false);
    const { t } = useTranslation()
    const dispatch = useDispatch();
    const router = useRouter();

    useEffect(() => {
        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(() => {
                Taro.navigateBack()
            }, 300)

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

    return <View>
        <View style={{ height: 20 }}></View>
        {/* <Input type="nickname" placeholder="请输入昵称" style={{ color: '#fff' }} value={value} onInput={handleChange} /> */}
        <Inputs placeholder={t('feature.common.toast.input_nickname')} value={value} onChange={handleChange} onConfirm={save}
            openType="nickname"
        />
        <Footer>
            <ChooseScenarioBtn disable={btnDisable} title={t('page.user_profile.save')} onClick={save} background={ColorType.fast} />
        </Footer>
        {/* <Text onClick={save} style={{ color: '#fff' }}>保存</Text> */}
    </View>
}