import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import MXHeaderRight from "@widgets/WPaymentOrder/WOrderHeader/MXHeaderRight";
import {ROUTE_PATH} from "@constants/routes";
import {useEffect} from "react";
const i18n=global.i18n;
const objInfo={};
const WOrderHeader = ({...props})=>{
    const route=props.route;
    const close=props.close;
    const renderRight=()=>{
        let areaItem=global.getLocalAreaItem();
        if (areaItem!=null){
            if (areaItem.code==="mx"){
                return <MXHeaderRight/>
            }
        }
        return (<></>);
    }
    const checkClose=()=>{
        close();
        if (objInfo.backTimer)clearTimeout(objInfo.backTimer);
        objInfo.backTimer=setTimeout(()=>{
            if (window.location.hash.indexOf(ROUTE_PATH.PAY_ORDER) !== -1){
                checkClose();
            }
        },10)
    }
    useEffect(() => {
        return () => {
            if (objInfo.backTimer){
                clearTimeout(objInfo.backTimer);
                objInfo.backTimer = null;
            }
        };
    }, []);
    const renderHeader=()=>{
        let title=route?route.title:"";
        return (
            <div className={styles.header}>
                <div className={styles.hcontent}>
                    {i18n.t(title)}
                </div>
                <div className={styles.top}>
                    <div className={styles.left}>
                        <button className={styles.close} onClick={() => {
                            checkClose();
                        }}>
                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
                        </button>
                    </div>
                    {renderRight()}
                </div>
            </div>
        )
    }
    return (
        <div id={props.id} className={props.className}>
            {renderHeader()}
        </div>
    )
}
export default WOrderHeader;