import React from "react";
import WOrderSuccess from "@widgets/WPaymentOrder/WOrderSuccess";
import {useSelector} from "react-redux";
import {getCurrPayOrder} from "@features/paySlice";
import Spring from "@components/Spring";
import styles from "./styles.module.scss";
import codiicon from "@assets/pay/mx/codiicon.png";
import {formatDate} from "@utils/helpers";
import html2canvas from "html2canvas";
import {toast} from "react-toastify";
const i18n=global.i18n;

const MXOrderQR=({close})=>{
    const orderInfo=useSelector(getCurrPayOrder);
    const savePayQR = () => {
        const style = document.createElement('style');
        document.head.appendChild(style);
        style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
        // 获取需要截图的元素
        const element = document.getElementById('payQR');

        // 使用 html2canvas 捕获元素并生成图片
        html2canvas(element,{
        }).then(canvas => {
            // 创建一个链接元素
            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png'); // 获取图片数据 URL
            link.download = 'payQR.png'; // 设置下载的文件名
            link.click(); // 触发下载
            toast.success(i18n.t("deposit.order_info_mx.qr_save_success"),{toastId:"save_success"});
        });
    };
    const renderTitle=()=>{
        return (
            <div className={styles.title_con}>
                <span>{i18n.t("deposit.order_info_mx.qr_title_1")}</span>
                <span>{i18n.t("deposit.order_info_mx.qr_title_2")}</span>
            </div>
        )
    }
    const renderQR=()=>{
        let qrdata=`data:image/png;base64,${orderInfo.payQrImg}`;
        return (
            <div className={styles.qr_con}>
                <div id={"payQR"} className={styles.qr_content}>
                    <img className={styles.qr_img} src={qrdata}/>
                    <img className={styles.codi_img} src={codiicon}/>
                </div>
                <button onClick={()=>{
                    savePayQR();
                }} className={`button-green ${styles.save_btn}`}>{i18n.t("deposit.order_info_mx.qr_save")}</button>
            </div>
        )
    }
    const renderInfo = () => {
        let createAt = Number(orderInfo.createAt);
        return (
            <div className={styles.info_con}>
                <div className={styles.info_item}>
                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title2")}</span>
                    <span>{orderInfo.benefi}</span>
                </div>
                <div className={styles.info_item}>
                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title3")}</span>
                    <span className={styles.money}>{global.DOLLAR + orderInfo.amount}</span>
                </div>
                <div className={styles.info_item}>
                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title4")}</span>
                    <span>{orderInfo.clabe}</span>
                </div>
                <div className={styles.info_item}>
                    <span className={styles.title}>{i18n.t("deposit.order_info_mx.title5")}</span>
                    <span>{orderInfo.concepto}</span>
                </div>
                <div className={styles.info_item}>
                    <span className={styles.title}>{i18n.t("deposit.order_info.create_date")}</span>
                    <span>{formatDate(createAt)}</span>
                </div>
            </div>
        )
    }
    const renderTips=()=>{
        return (
            <div className={styles.tips_con}>
                <span>{i18n.t("deposit.order_info_mx.qr_tips_1")}</span>
                <span>{i18n.t("deposit.order_info_mx.qr_tips_2")}</span>
                <span>{i18n.t("deposit.order_info_mx.qr_tips_3")}</span>
            </div>
        )
    }
    const renderOrderInfo = () => {
        return (
            <div className={styles.order_info}>
                {renderTitle()}
                {renderQR()}
                {renderInfo()}
                {renderTips()}
            </div>
        )
    }
    const renderOrder = () => {
        return (
            <Spring type="slideUp" className={styles.container}>
                {renderOrderInfo()}
            </Spring>
        )
    }
    const renderView = () => {
        if (orderInfo != null) {
            if (orderInfo.status === "success") {
                return (
                    <WOrderSuccess close={close}/>
                )
            } else {
                return renderOrder();
            }
        }
        return (<></>);
    }
    return (
        <>
            {renderView()}
        </>
    )
}
export default MXOrderQR;