import styles from "./styles.module.scss";
import Spring from "@components/Spring";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getPayOrderList, getPayOrderStatus } from "@features/paySlice";
import { REQ_STATUS } from "@api/config";
import SmallLoading from "@components/SmallLoading";
import { reqPayOrderList } from "@features/api";
import { formatCash } from "@utils/helpers";
import { toast } from "react-toastify";
import { CopyToClipboard } from "react-copy-to-clipboard";
import SvgIcon from "@components/SvgIcon";
import { ReactComponent as PixLogo } from '@assets/singlesvg/cashapp.svg';
import Popup from "@components/Popup";
import { ReactComponent as SuccssLogo } from '@assets/singlesvg/succss.svg';
import { ReactComponent as PendingLogo } from '@assets/singlesvg/pending.svg';
import { ReactComponent as FailedLogo } from '@assets/singlesvg/failed.svg';
import { APP_COUNTRY_CODE } from "@constants/app";
import WHistoryEmpty from "@widgets/WHistoryEmpty";
import usePaymentActions from "@hooks/usePaymentActions";

const i18n = global.i18n;
const WRechargeHistory = ({ close }) => {
    const { getPaymentConfig } = usePaymentActions();
    const status = useSelector(getPayOrderStatus);
    const orderList = useSelector(getPayOrderList);
    const dispatch = useDispatch();
    const [showDetails, setShowDetails] = useState(false);
    const [detailInfo, setDetailInfo] = useState(null);
    const areaItem = global.getLocalAreaItem();
    useEffect(() => {
        dispatch(reqPayOrderList());
    }, [])
    const checkShowPixLogo = () => {
        if (areaItem.code === APP_COUNTRY_CODE.BR) {
            return true;
        }
        return false;
    }

    const renderPayType = (item) => {
        const payConfig = getPaymentConfig(item.type);
        return (
            <div className={`${styles.pay_type_con} ${styles.title}`}>
                <img src={payConfig.icon} />
                {payConfig.name}
            </div>
        )
    }

    const renderContent = () => {
        if (status === REQ_STATUS.LOADING) {
            return (<SmallLoading></SmallLoading>)
        }
        if (orderList == null || orderList.length == 0) return (<WHistoryEmpty />);
        return (
            <Spring type="slideUp" className={styles.content}>
                {
                    orderList.map((item, index) => {
                        let amount = Number(item.amount);
                        amount = formatCash(amount);
                        let time = item.created_at;
                        if (item.finished_at != null && item.finished_at !== "") {
                            time = item.finished_at;
                        }
                        let statusTxt = i18n.t("deposit.HistoryListPanel.status_2");
                        let status_cls = styles.status_failed;
                        let status = parseInt(item.pay_status);
                        if (status === 0) {
                            statusTxt = i18n.t("deposit.HistoryListPanel.status_0");
                            status_cls = styles.status_pending;
                        }
                        else if (status === 1) {
                            statusTxt = i18n.t("deposit.HistoryListPanel.status_1");
                            status_cls = styles.status_success;
                        }
                        return (
                            <button key={index} className={styles.item_con} onClick={() => {
                                setDetailInfo(item);
                                setShowDetails(true);
                            }}>
                                <div className={styles.item}>
                                    {renderPayType(item)}
                                    <div className={styles.title}>{global.DOLLAR + amount}</div>
                                </div>
                                <div className={styles.item}>
                                    <div>{time}</div>
                                </div>
                                <div className={styles.item}>
                                    <CopyToClipboard text={item.payment_sn} onCopy={() => {
                                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                                    }}>
                                        <div className={styles.payment_sn_con} onClick={(event) => {
                                            event.stopPropagation();
                                        }}>
                                            {item.payment_sn}
                                            <SvgIcon className={styles.logo} herf={"icon_Copy"} />
                                        </div>
                                    </CopyToClipboard>
                                    <div className={status_cls}>
                                        {statusTxt}
                                    </div>
                                </div>
                            </button>
                        )
                    })
                }
            </Spring>
        )
    }
    const renderDetails = () => {
        let item = detailInfo;
        if (item == null) return (<></>);
        let amount = Number(item.amount);
        amount = formatCash(amount);
        let status = parseInt(item.pay_status);
        const payConfig = getPaymentConfig(item.type);
        // status=2
        let statusTxt = i18n.t("deposit.HistoryListPanel.status_2");
        let status_cls = styles.detail_failed;
        let Logo = FailedLogo;
        if (status === 0) {
            statusTxt = i18n.t("deposit.HistoryListPanel.status_0");
            status_cls = styles.detail_pending;
            Logo = PendingLogo;
        }
        else if (status === 1) {
            statusTxt = i18n.t("deposit.HistoryListPanel.status_1");
            status_cls = styles.detail_success;
            Logo = SuccssLogo;
        }
        return (
            <Popup onClose={() => {
                setShowDetails(false)
            }} open={showDetails}>
                <div className={styles.detail}>
                    <div className={styles.top}>
                        <div>{i18n.t("deposit.HistoryListPanel.details.title")}</div>
                        <div className={styles.status}>
                            <Logo className={styles.logo}></Logo>
                            <div className={status_cls}>
                                {statusTxt}
                            </div>
                        </div>
                        <div>{global.DOLLAR + amount}</div>
                    </div>
                    <div className={styles.line}></div>
                    <div className={styles.bottom}>
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_create")}</div>
                            <div>{item.created_at}</div>
                        </div>
                        {
                            item.finished_at != null && item.finished_at !== "" ? (
                                <div className={styles.item}>
                                    <div
                                        className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_complete")}</div>
                                    <div>{item.finished_at}</div>
                                </div>
                            ) : (<></>)
                        }
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_transtype")}</div>
                            <div>{payConfig.name}</div>
                        </div>
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("deposit.HistoryListPanel.details.label_number")}</div>
                            <CopyToClipboard text={item.payment_sn} onCopy={() => {
                                toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                            }}>
                                <div className={styles.number}>
                                    {item.payment_sn}
                                    <SvgIcon className={styles.logo} herf={"icon_Copy"} />
                                </div>
                            </CopyToClipboard>
                        </div>
                    </div>
                    <div className={styles.line}></div>
                    <button className={"button-green"} onClick={() => {
                        setShowDetails(false);
                    }}>
                        {i18n.t("deposit.HistoryListPanel.details.btn_confirm")}
                    </button>
                </div>
            </Popup>
        )
    }
    return (
        <div className={styles.container}>
            {renderContent()}
            {renderDetails()}
        </div>
    )
}
export default WRechargeHistory;