import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import {useState} from "react";
import WWithdrawRules from "@widgets/WWithdraw/WWithdrawRules/WWithdrawRules";
const i18n=global.i18n;
const WithdrawHeader=({...props})=>{
    const route=props.route;
    const close=props.close;
    const navigate=useNavigate();
    const [openRules,setOpenRules]=useState(false);
    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={()=>{
                            close();
                        }}>
                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
                        </button>
                    </div>
                    <div className={styles.right}>
                        <button className={styles.right_btn} onClick={()=>{
                            setOpenRules(true);
                        }}>
                            <SvgIcon className={styles.icon} herf={"icon_Help"}/>
                        </button>
                        <button className={styles.right_btn} onClick={()=>{
                            navigate(route.path+ROUTE_PATH.WITHDRAW_REACORD);
                        }}>
                            <SvgIcon className={styles.icon} herf={"icon_History"}/>
                        </button>
                    </div>
                </div>
            </div>
        )
    }
    const renderRules=()=>{
        return (
            <WWithdrawRules open={openRules} onClose={()=>{
                setOpenRules(false);
            }}></WWithdrawRules>
        )
    }
    return (
        <div id={props.id} className={props.className}>
            {renderHeader()}
            {renderRules()}
        </div>
    )
}
export default WithdrawHeader;
