import {useDispatch, useSelector} from "react-redux";
import {getCurrPayOrder, getPaymentOrderQRStatus} from "@features/paySlice";
import React, {useEffect, useState} from "react";
import Spring from "@components/Spring";
import styles from "./styles.module.scss";
import {formatDate, formatTime, stringFormat} from "@utils/helpers";
import SvgIcon from "@components/SvgIcon";
import {toast} from "react-toastify";
import {CopyToClipboard} from "react-copy-to-clipboard";
import {ReactComponent as Warning} from '@assets/singlesvg/warning.svg';
import {ROUTE_PATH} from "@constants/routes";
import {useNavigate} from "react-router-dom";
import WOrderSuccess from "@widgets/WPaymentOrder/WOrderSuccess";
import qricon from "@assets/pay/mx/qricon.png";
import qrlogo from "@assets/pay/mx/qrlogo.png";
import {REQ_STATUS} from "@api/config";
import {reqPaymentOrderQR} from "@features/api";
import {getUserInfo} from "@features/mainSlice";
const i18n=global.i18n;
const MXPayOrder = ({close}) => {
    const orderInfo=useSelector(getCurrPayOrder);
    const [leftTime,setLeftTime]=useState(0);
    const navigate=useNavigate();
    const qrstatus=useSelector(getPaymentOrderQRStatus);
    const dispatch = useDispatch();
    const user=useSelector(getUserInfo);
    const getLeftTime=()=>{
        if (orderInfo==null)return 0;
        let deadline=Number(orderInfo.deadline);
        let createAt=Number(orderInfo.createAt);
        let expireAt=createAt+deadline*1000;
        let now=Date.now();
        let left=expireAt-now;
        if (left<0)left=0;
        return left;
    }
    const updateLeftTime=(timer)=>{
        let left=getLeftTime();
        setLeftTime(left);
        if (left<=0){
            clearInterval(timer);
            timer=null;
            if (close)close();
        }
        return timer;
    }
    useEffect(()=>{
        let timer=null;
        if (orderInfo){
            setLeftTime(getLeftTime());
            timer=setInterval(()=>{
                timer=updateLeftTime(timer);
            },1000)
        }
        return () => {
            if (timer!=null){
                clearInterval(timer);
                timer=null;
            }
        };
    },[orderInfo])

    const onClickCustom=()=>{
        navigate(ROUTE_PATH.CUSTOMER);
    }
    const callback=()=>{
        navigate(ROUTE_PATH.PAY_ORDER_QR,{replace:true});
    }
    const onClickQR=()=>{
        if (qrstatus===REQ_STATUS.LOADING)return;
        if (global.loadingCircular)global.loadingCircular.show(true);
        let data={...orderInfo.arg,user,callback};
        dispatch(reqPaymentOrderQR(data)).then((respose)=>{
            if (global.loadingCircular)global.loadingCircular.hide();
        })
    }
    const renderCopyAll=()=>{
        let content=i18n.t("deposit.order_info_mx.title1")+":"+orderInfo.bank+"\n";
        content+=i18n.t("deposit.order_info_mx.title2")+":"+orderInfo.benefi+"\n";
        content+=i18n.t("deposit.order_info_mx.title3")+":"+(global.DOLLAR + orderInfo.amount)+"\n";
        content+=i18n.t("deposit.order_info_mx.title4")+":"+orderInfo.clabe+"\n";
        content+=i18n.t("deposit.order_info_mx.title5")+":"+orderInfo.concepto+"\n";
        return (
            <CopyToClipboard text={content} onCopy={()=>{
                toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
            }}>
                <button className={"button-green"}>
                    {i18n.t("deposit.order_info_mx.copy_all")}
                </button>
            </CopyToClipboard>
        )
    }
    const renderCustomer=()=>{
        return (
            <button className={"button-green"} onClick={()=>{
                onClickCustom();
            }}>
                <SvgIcon className={styles.icon_chat} herf={"icon_Support"}></SvgIcon>
                {i18n.t("deposit.order_info_mx.btn_chat")}
            </button>
        )
    }
    const renderTips = () => {
        return (
            <div className={styles.notice_con}>
                <Warning className={styles.n_icon}></Warning>
                <div className={styles.notice}>
                    {i18n.t("deposit.order_info_mx.notice")}
                </div>
            </div>
        )
    }
    const renderBasic = () => {
        let deadline = Number(orderInfo.deadline);
        let createAt = Number(orderInfo.createAt);
        let expireAt = createAt + deadline * 1000;
        return (
            <>
                {/*<div className={styles.top}>*/}
                {/*    /!*<button>*!/*/}
                {/*    /!*    <SvgIcon className={styles.icon} herf={"icon_Support"}></SvgIcon>*!/*/}
                {/*    /!*</button>*!/*/}
                {/*    <div className={styles.tips}>*/}
                {/*        {stringFormat(i18n.t("deposit.order_info.tips"), [formatDate(expireAt)])}*/}
                {/*    </div>*/}
                {/*</div>*/}
                <div className={styles.base_info}>
                    <div className={`${styles.info_row} ${styles.info_row_top} ${styles.info_row_light}`}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.create_date")}
                        </div>
                        {formatDate(createAt)}
                    </div>
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.time")}
                        </div>
                        {formatTime(leftTime, true)}
                    </div>

                </div>
                <div className={styles.base_info}>
                    <CopyToClipboard text={orderInfo.bank} onCopy={() => {
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={`${styles.info_row} ${styles.info_row_top} ${styles.info_row_light}`}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info_mx.title1")}
                            </div>
                            <div className={styles.order}>
                                {orderInfo.bank}
                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
                            </div>
                        </button>
                    </CopyToClipboard>
                    <CopyToClipboard text={orderInfo.benefi} onCopy={() => {
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={styles.info_row}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info_mx.title2")}
                            </div>
                            <div className={styles.order}>
                                {orderInfo.benefi}
                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
                            </div>
                        </button>
                    </CopyToClipboard>
                    <CopyToClipboard text={orderInfo.amount} onCopy={() => {
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={`${styles.info_row} ${styles.info_row_light}`}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info_mx.title3")}
                            </div>
                            <div className={styles.order}>
                                <div className={styles.money}>
                                    {global.DOLLAR + orderInfo.amount}
                                </div>
                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
                            </div>
                        </button>
                    </CopyToClipboard>
                    <CopyToClipboard text={orderInfo.clabe} onCopy={() => {
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={styles.info_row}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info_mx.title4")}
                            </div>
                            <div className={styles.order}>
                                {orderInfo.clabe}
                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
                            </div>
                        </button>
                    </CopyToClipboard>
                    <CopyToClipboard text={orderInfo.clabe} onCopy={() => {
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={`${styles.info_row} ${styles.info_row_bottom} ${styles.info_row_light}`}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info_mx.title5")}
                            </div>
                            <div className={styles.order}>
                                {orderInfo.concepto}
                                <SvgIcon className={styles.logo} herf={"icon_Copy"}/>
                            </div>
                        </button>
                    </CopyToClipboard>
                </div>
            </>
        )
    }
    const renderQRBtn=()=>{
        let openQR=0;
        if (orderInfo&&orderInfo.openQR!=null)openQR=orderInfo.openQR;
        if (!openQR)return renderCustomer();
        return (
            <button className={"button-green"} onClick={() => {
                onClickQR();
            }}>
                <div className={styles.qr_btn_con}>
                    <div className={styles.qr_sub_con}>
                        <img className={styles.qr_icon} src={qricon}/>
                        <div className={styles.qr_text}>
                            <span>{i18n.t("deposit.order_info_mx.qr_via")}</span>
                            <span>{i18n.t("deposit.order_info_mx.qr_code")}</span>
                        </div>
                    </div>
                    <div className={styles.qr_sub_con}>
                        <img className={styles.qr_logo} src={qrlogo}/>
                    </div>
                </div>
            </button>
        )
    }
    const renderOrderInfo = () => {
        return (
            <div className={styles.order_info}>
                {renderBasic()}
                {/*{renderCopyAll()}*/}
                {renderTips()}
                {/*{renderCustomer()}*/}
                {renderQRBtn()}
            </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 MXPayOrder;