import React, { useState, useEffect } from "react";
import Taro, { useRouter } from '@tarojs/taro';
import { View, Text, Input, Button } from "@tarojs/components";

import "./index.scss";
import httpService from "@/services/httpService";

interface FormFields {
    old_password?: string;
    new_password: string;
    confirm_password: string;
    sms_code?: string;
}

const SetTransactionPassword: React.FC = () => {
    const [handleType, setHandleType] = useState("set");
    const router = useRouter();
    const { type, phone, sms_code } = router.params;

    useEffect(() => {
        if (type) {
            setHandleType(type);
        }
    }, [type]);

    const [formData, setFormData] = useState<FormFields>({
        old_password: "",
        new_password: "",
        confirm_password: "",
        sms_code: "",
    });

    const handleInput = (e: any, field: string) => {
        setFormData({ ...formData, [field]: e.detail.value });
    };

    const handleConfirm = async () => {
        const { new_password, confirm_password } = formData;
        if (new_password !== confirm_password) {
            Taro.showToast({
                title: "两次密码输入不一致",
                icon: "none",
            });
            return;
        }
        try {
            await httpService.post("/wallet/set_payment_password", { password: new_password });
            Taro.showToast({
                title: "设置交易密码成功",
                icon: "success",
            });
            Taro.navigateBack();
        } catch (error) {
            Taro.showToast({
                title: "设置交易密码失败",
                icon: "none",
            });
            return;
        }
    };

    return (
        <View className="set-transaction-password-page">
            {
                // handleType === "reset" && (
                //     <View className="form-item">
                //         <Text className="form-label">旧密码</Text>
                //         <Input placeholder="请输入旧密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "old_password") }}></Input>
                //     </View>
                // )
            }
            <View className="form-item">
                <Text className="form-label">交易密码</Text>
                <Input placeholder="请输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "new_password") }}></Input>
            </View>
            <View className="form-item">
                <Text className="form-label">重复密码</Text>
                <Input placeholder="请再次输入交易密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "confirm_password") }}></Input>
            </View>
            {
                handleType === "set" && (
                    <View className="form-item">
                        <Text className="form-label">手机验证</Text>
                        <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
                        <Button className="btn" >获取验证码</Button>
                    </View>
                )
            }
            <Text className="tips">* 密码由6位数字组成</Text>
            <Button className="btn bottom-btn" onClick={handleConfirm}>完成</Button>
        </View>
    );
};

export default SetTransactionPassword;