import styles from './styles.module.scss';
import BRPayOrder from "@widgets/WPaymentOrder/BR/BRPayOrder";
import MXPayOrder from "@widgets/WPaymentOrder/MX/MXPayOrder";
import RUPayOrder from "@widgets/WPaymentOrder/RU/RUPayOrder";
import MXOrderQR from "@widgets/WPaymentOrder/MX/QR/MXOrderQR";
import {useLocation, useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import React, {useEffect, useRef} from "react";
import {useSelector} from "react-redux";
import {getCurrPayOrder} from "@features/paySlice";
import {useThemeProvider} from "@contexts/themeContext";
const objInfo={};
const WPaymentOrder=({close})=>{
    const {hash,pathname} = useLocation();
    const orderInfo=useSelector(getCurrPayOrder);
    const navigate=useNavigate();
    const components={
        "br":BRPayOrder,
        "mx":MXPayOrder,
        "ru":RUPayOrder
    }
    const onBackToHome=()=>{
        close();
        if (objInfo.backTimer)clearTimeout(objInfo.backTimer);
        objInfo.backTimer=setTimeout(()=>{
            if (window.location.hash.indexOf(ROUTE_PATH.PAY_ORDER) !== -1){
                onBackToHome();
            }
        },10)
    }
    const receiveMessage=(event)=>{
        let data=event.data;
        // console.log(data);
        if (data&&data.cmd!=null){
            // toast.success(JSON.stringify(data))
            if (data.cmd==="back"){
                onBackToHome();
            }
        }
    }
    const initEvent=()=>{
        window.addEventListener("message", receiveMessage, false);
    }
    const removeEvent=()=>{
        window.removeEventListener("message", receiveMessage);
        if (objInfo.backTimer){
            clearTimeout(objInfo.backTimer);
            objInfo.backTimer = null;
        }
    }
    useEffect(() => {
        initEvent();
        return () => {
            removeEvent();
        };
    }, []);
    const renderOrderRedirect=()=>{
        return (
            <iframe
                id={"order"}
                title={"order"}
                src={orderInfo.redirectURL}
                className={styles.order_frame}
                allow="fullscreen"
                sandbox='allow-scripts allow-same-origin allow-popups allow-top-navigation allow-top-navigation-by-user-activation'
            >
            </iframe>
        )
    }
    const renderPayOrder=()=>{
        if (orderInfo==null)return (<></>);
        if (orderInfo.redirectURL != null && orderInfo.redirectURL!==""){
            return renderOrderRedirect();
        }
        if (hash===ROUTE_PATH.PAY_ORDER_QR){
            return <MXOrderQR close={close}/>
        }
        let areaItem=global.getLocalAreaItem();
        if (areaItem!=null){
            let Comp=components[areaItem.code];
            if (Comp!=null){
                return <Comp close={close} />
            }
        }
        return (<></>);
    }
    return (
        <div className={styles.container}>
            {renderPayOrder()}
        </div>
    )
}
export default WPaymentOrder;
