import Fade from "@mui/material/Fade";
import {ClickAwayListener} from "@mui/base/ClickAwayListener";
import Grow from "@mui/material/Grow";
import styles from "./styles.module.scss";
import Modal from "@mui/material/Modal";
import MultiNumPassInput from "@components/UInput/MultiNumPassInput";
import React, {useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {getWDBaseInfoStatus, setChangePayPassType} from "@features/paySlice";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {reqWithdrawBaseInfo} from "@features/api";
import {getHttpMsg} from "@utils/helpers";
import {toast} from "react-toastify";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import SvgIcon from "@components/SvgIcon";
import {getUserInfo} from "@features/mainSlice";
const i18n=global.i18n;

const WDPassBox=({open,onClose,title,confirmLabel,onConfirm})=>{
    // let {open,onClose,title,confirmLabel,onConfirm}=props;
    const [pass,setPass]=useState("");
    if (title==null)title=i18n.t("withdraw.pass.pass_box_title");
    if (confirmLabel==null)confirmLabel=i18n.t("withdraw.pass.btn_confirm");
    const passLen=6;
    const status=useSelector(getWDBaseInfoStatus);
    const dispatch=useDispatch();
    const navigate=useNavigate();
    const user=useSelector(getUserInfo);
    const callback=(data)=>{
        if (data==null)return;
        if (data.code===200){
            if (onClose)onClose();
            navigate(ROUTE_PATH.SAQUE);
        }
        else
        {
            global.setWDPass("");
            let msg=getHttpMsg(data);
            toast.error(msg);
        }
    }
    const checkPass=(pass)=>{
        global.setWDPass(pass);
        dispatch(reqWithdrawBaseInfo(callback));
    }
    const onSubmit=(pass)=>{
        if (pass.length<passLen)return;
        if (status===REQ_STATUS.LOADING)return;
        // if (onConfirm!=null)onConfirm(pass);
        // if (onClose)onClose();
        checkPass(pass)
    }
    const onSevice=()=>{
        if (onClose)onClose();
        navigate(ROUTE_PATH.CUSTOMER);
    }
    const onForgotPassword=()=>{
        let isBindPhone=user != null && user.Phone != null && user.Phone !== "";
        if (onClose)onClose();
        if (!isBindPhone){
            global.showBindPhone();
            return;
        }
        dispatch(setChangePayPassType(2));
        navigate(ROUTE_PATH.CHANGE_PAY_PASS)
    }
    return (
        <Modal open={open} onClose={onClose} closeAfterTransition>
            <Fade in={open} timeout={500}>
                <div className="popup-container">
                    <ClickAwayListener onClickAway={onClose}>
                        <Grow in={open} timeout={500}>
                            <div className={`popup card card-padded ${styles.container}`}>
                                <div className={styles.content}>
                                    <div className={styles.title}>{title}</div>
                                    <MultiNumPassInput
                                        focus={true}
                                        length={passLen}
                                        value={""}
                                        onChange={(num,index)=>{
                                        }}
                                        onFinish={(numArr)=>{
                                            let value=numArr.join("");
                                            setPass(value);
                                            onSubmit(value);
                                        }}
                                    />
                                    <button className={"button-green"} onClick={()=>{
                                        onSubmit(pass);
                                    }}>
                                        {
                                            status===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"} />):confirmLabel
                                        }
                                    </button>
                                    <div className={styles.help_con}>
                                        <button className={styles.btn_forget} onClick={onForgotPassword}>{i18n.t("withdraw.pass.btn_forgot")}</button>
                                        <button className={styles.btn_service} onClick={onSevice}>
                                            <SvgIcon className={styles.icon} herf={"icon_Support"}/>
                                            {/*{i18n.t("withdraw.pass.btn_service")}*/}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </Grow>
                    </ClickAwayListener>
                </div>
            </Fade>
        </Modal>
    )
}
export default WDPassBox;