import styles from "./styles.module.scss";
import Spring from "@components/Spring";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { getUserInfo } from "@features/mainSlice";
import { getCurrPayOrder } from "@features/paySlice";
import { ReactComponent as PixLogo } from '@assets/singlesvg/cashapp.svg';
import { formatDate, formatTime, stringFormat } from "@utils/helpers";
import SvgIcon from "@components/SvgIcon";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { toast } from "react-toastify";
import QRCode from 'qrcode.react';
import { ReactComponent as SuccessIcon } from "@assets/singlesvg/succss.svg";
import WOrderSuccess from "@widgets/WPaymentOrder/WOrderSuccess";
import usePaymentActions from "@hooks/usePaymentActions";
const i18n = global.i18n;
const BRPayOrder = ({ close }) => {
    const navigate = useNavigate();
    const user = useSelector(getUserInfo);
    const orderInfo = useSelector(getCurrPayOrder);
    const [leftTime, setLeftTime] = useState(0);
    const { getPaymentConfig } = usePaymentActions();
    const payConfig = getPaymentConfig();
    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 renderTitle = () => {
        return (
            <div className={styles.title}>
                {/* <PixLogo className={styles.logo} /> */}
                <svg className={styles.logo}>
                    <use xlinkHref={payConfig.icon} />
                </svg>

                {payConfig.name}
            </div>
        )
    }
    const renderBasic = () => {
        let deadline = Number(orderInfo.deadline);
        let createAt = Number(orderInfo.createAt);
        let expireAt = createAt + deadline * 1000;
        return (
            <>
                <div className={styles.tips}>
                    {stringFormat(i18n.t("deposit.order_info.tips"), [formatDate(expireAt)])}
                </div>
                <div className={styles.base_info}>
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.create_date")}
                        </div>
                        {formatDate(createAt)}
                    </div>
                    {/*<div className={styles.line}></div>*/}
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.time")}
                        </div>
                        {formatTime(leftTime, true)}
                    </div>
                    {/*<div className={styles.line}></div>*/}
                    <CopyToClipboard text={orderInfo.prdOrdNo} onCopy={() => {
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <div className={styles.info_row}>
                            <div className={styles.label}>
                                {i18n.t("deposit.order_info.order")}
                            </div>
                            <div className={styles.order}>
                                {orderInfo.prdOrdNo}
                                <SvgIcon className={styles.logo} herf={"icon_Copy"} />
                            </div>
                        </div>
                    </CopyToClipboard>
                    <div className={styles.info_row}>
                        <div className={styles.label}>
                            {i18n.t("deposit.order_info.value")}
                        </div>
                        <div className={styles.money}>
                            {global.DOLLAR + orderInfo.money}
                        </div>
                    </div>
                </div>
            </>
        )
    }
    const renderPayInfo = () => {
        return (
            <div className={styles.pay_info}>
                <div className={styles.pay_label}>{i18n.t("deposit.order_info.content")}</div>
                <div className={styles.pay_content}>{orderInfo.content}</div>
                <QRCode className={styles.pay_qr} value={orderInfo.content} />
                <div className={styles.pay_btn}>
                    <CopyToClipboard text={orderInfo.content} onCopy={() => {
                        toast.success(i18n.t("deposit.order_info.tips1"),{toastId:"copy_success"});
                    }}>
                        <button className={"button-green"}>
                            {stringFormat(i18n.t("deposit.order_info.copyButton"), [payConfig.name])}
                        </button>
                    </CopyToClipboard>
                    {/*<button className={styles.btn_already}>*/}
                    {/*    {i18n.t("deposit.order_info.lookButton")}*/}
                    {/*</button>*/}
                </div>
            </div>
        )
    }
    const renderOrderInfo = () => {
        return (
            <div className={styles.order_info}>
                {renderBasic()}
                {renderPayInfo()}
            </div>
        )
    }
    const renderSuccess = () => {
        return (
            <div className={styles.success}>
                <SuccessIcon className={styles.logo} />
                <div className={styles.tips}>{i18n.t("deposit.order_info.tips2")}</div>
                <div className={styles.btns_con}>
                    <button className={"button-green"} onClick={() => {
                        close();
                    }}>{i18n.t("deposit.order_info.okey")}</button>
                </div>
            </div>
        )
    }
    const renderView = () => {
        let view = (<></>);
        if (orderInfo == null) return view;
        if (orderInfo.status === "success") {
            view = (
                // <Spring type="slideUp" className={styles.container}>
                //     {renderSuccess()}
                // </Spring>
                <WOrderSuccess close={close} />
            )
        }
        else {
            view = (
                <Spring type="slideUp" className={styles.container}>
                    {renderTitle()}
                    {renderOrderInfo()}
                </Spring>
            )
        }
        return view;
    }
    return (
        <>
            {renderView()}
        </>
    )
}
export default BRPayOrder;
