import React, { useEffect, useRef, useState } from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import usdimg from "@assets/bindPhone/bind-phone-bg.webp";
import { formatCash, stringFormat } from "@utils/helpers";
import { REQ_STATUS } from "@api/config";
import { useDispatch, useSelector } from "react-redux";
import { getBindSMSStatus, getOldUserInfo, getUpgradeBonus } from "@features/mainSlice";
import { reqBindSMS } from "@features/api";
import { APP_WELFARE } from "@constants/app";
import { useThemeProvider } from "@contexts/themeContext";
import PhoneSMS from "@widgets/PhoneSMS";
import LazyImage from "@components/LazyImage";
import OldAccountTips from "./OldAccountTips";
const i18n = global.i18n;

const WBindPhone = ({ }) => {
    const [isShow, setIsShow] = useState(false);
    const [isLock, setIsLock] = useState(false);
    const [oldTips, setOldTips] = useState(false);
    const bindStatus = useSelector(getBindSMSStatus);
    const upgradBonus = useSelector(getUpgradeBonus);
    const regCoins = formatCash(upgradBonus, 0);
    const dispatch = useDispatch();
    const { setWelfTabState } = useThemeProvider();

    // /bindsms    {phone,code,password,repassword}
    const doCallback = (success) => {
        global.bindPhoneCallback && global.bindPhoneCallback(success);
        global.bindPhoneCallback = null;
    };
    const show = () => {
        setIsShow(true);
        setIsLock(false);
        setWelfTabState(APP_WELFARE.BIND);
    };
    const hide = () => {
        doCallback(false);
        setIsShow(false);
        setWelfTabState(-1);
        global.openNextPopup();
    };
    const onBindCB = (code, data) => {
        // 防止store locked!!
        setTimeout(() => {
            if (code === 200) {
                doCallback(true);
                hide();
            } else {
                setIsLock(false);
                if (code == 301 && data && data.UserID) {
                    setIsShow(false);
                    setOldTips(true);
                }
            }
        }, 0);
    };
    const onSubmitBind = async (data) => {
        if (bindStatus === REQ_STATUS.LOADING) return;
        if (isLock) return;
        setIsLock(true);
        let params = data;
        params.callback = onBindCB;

        //adjust 点击绑定手机
        global.tracker.trackEvent("click_bind_phone");
        global.tracker.trackEvent("click_bind_phone_count");

        let res = await dispatch(reqBindSMS(params)).unwrap();
        if (res.code == 200) {
            global.bindPhoneRes && global.bindPhoneRes(true);
            //console.error("reqBindSMS", res);
        }
    };

    const handleOldTipsClose = (handle) => {
        if (!handle) {
            // cancel
            show();
        }

        setOldTips(false);
    };
    useEffect(() => {
        const bindPhone = {
            show,
            hide
        };
        global.bindPhone = bindPhone;
        return () => {
        };
    }, []);

    return (
        <>
            <Popup onClose={hide} open={isShow}>
                <div className={styles.container}>
                    <span className={styles.title}>
                        {i18n.t("bindPhone.title_link_phone")} ${regCoins}
                    </span>
                    <div className={styles.img_box}>
                        <LazyImage src={usdimg} alt={stringFormat(i18n.t("bindPhone.tips_alt"), [regCoins])} />
                        <div className={styles.tips_box}>
                            <div className={styles.tips_text}>
                                {i18n.t("bindPhone.tips")}
                                <br />
                                <span className={styles.tips_text_small}>{i18n.t("bindPhone.tips2")}</span>
                            </div>
                            <div className={styles.tips_coin}>{`$${regCoins}`}</div>
                        </div>

                        <div className={styles.tips_ps}>{i18n.t("bindPhone.tips3")}</div>
                    </div>
                    <PhoneSMS
                        callback={onSubmitBind}
                        handleStatus={bindStatus}
                        buttonText={stringFormat(i18n.t("bindPhone.btn_submit"), [regCoins])}>
                        <span className={styles.btn_tips}>
                            {i18n.t("bindPhone.tips4")}
                        </span>
                    </PhoneSMS>
                </div>
            </Popup>

            {oldTips && <OldAccountTips onClose={handleOldTipsClose} />}
        </>

    );
};
export default WBindPhone;