import Fade from "@mui/material/Fade";
import {ClickAwayListener} from "@mui/base/ClickAwayListener";
import Grow from "@mui/material/Grow";
import Modal from "@mui/material/Modal";
import {useThemeProvider} from "@contexts/themeContext";
import styles from "./styles.module.scss";
import {ReactComponent as Imgbg} from '@assets/wdpop/copy-url-bg.svg';
import bannerImg from '@assets/wdpop/popup_icon001.png';
import {useNavigate} from "react-router";
import {ROUTE_PATH} from "@constants/routes";
import {useDispatch} from "react-redux";
import {setChangePayPassType} from "@features/paySlice";
const i18n=global.i18n;
const WDPassPrompt=()=>{
    const {isMobile,isShowPassPrompt,setIsShowPassPrompt} = useThemeProvider();
    const navigate=useNavigate();
    const dispatch = useDispatch();
    const onClose=()=>{
        setIsShowPassPrompt(false);
    }
    const onConfirm=()=>{
        setIsShowPassPrompt(false);
        dispatch(setChangePayPassType(0));
        navigate(ROUTE_PATH.CHANGE_PAY_PASS);
    }
    return (
        <Modal open={isShowPassPrompt} onClose={onClose} closeAfterTransition>
            <Fade in={isShowPassPrompt} timeout={500}>
                <div className="popup-container">
                    <ClickAwayListener onClickAway={onClose}>
                        <Grow in={isShowPassPrompt} timeout={500}>
                            <div className={`${styles.container}`}>
                                <div className={styles.banner}>
                                    <Imgbg/>
                                    <img src={bannerImg}/>
                                </div>
                                <div className={styles.content}>
                                    {i18n.t("withdraw.pass.prompt")}
                                </div>
                                <button className={styles.btn} onClick={onConfirm}>
                                    {i18n.t("withdraw.pass.btn_confirm")}
                                </button>
                            </div>
                        </Grow>
                    </ClickAwayListener>
                </div>
            </Fade>
        </Modal>
    )
}
export default WDPassPrompt;
