import styles from './styles.module.scss';
import { useDispatch, useSelector } from "react-redux";
import { getWithdrawRecord, getWithdrawRecordStatus } from "@features/paySlice";
import React, { useEffect, useState } from "react";
import { REQ_STATUS } from "@api/config";
import SmallLoading from "@components/SmallLoading";
import Spring from "@components/Spring";
import { formatCash, formatDate } from "@utils/helpers";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { toast } from "react-toastify";
import SvgIcon from "@components/SvgIcon";
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 { ReactComponent as PixLogo } from '@assets/singlesvg/cashapp.svg';
import { reqWithdrawRecord } from "@features/api";
import { APP_COUNTRY_CODE } from "@constants/app";
import WHistoryEmpty from '@widgets/WHistoryEmpty';
import usePaymentActions from '@hooks/usePaymentActions';
const i18n = global.i18n;
const stateType = {
    ERROR: -1,                  // 订单错误
    CHECKING: 1,                // 审核中
    SUCCESS: 2,                 // 提现成功
    FAIL: 3,                    // 提现失败
    RECALL: 4,                  // 订单撤回
    PROCESSING: 5,              // 处理中
    TTP_ERROR: 6,               // 三方订单异常
};
const WWithdrawRecord = ({ close }) => {
    const { getWithdrawConfig } = usePaymentActions();
    const status = useSelector(getWithdrawRecordStatus);
    const recordList = useSelector(getWithdrawRecord);
    const [showDetails, setShowDetails] = useState(false);
    const [detailInfo, setDetailInfo] = useState(null);
    const dispatch = useDispatch();
    const areaItem = global.getLocalAreaItem();
    useEffect(() => {
        dispatch(reqWithdrawRecord())
    }, [])
    const checkShowPixLogo = () => {
        if (areaItem.code === APP_COUNTRY_CODE.BR) {
            return true;
        }
        return false;
    }
    const getStateTxt = (state) => {
        state = parseInt(state);
        switch (state) {
            case stateType.CHECKING: {
                return i18n.t("withdraw.record.wait");
            }
            case stateType.SUCCESS: {
                return i18n.t("withdraw.record.success");
            }
            case stateType.PROCESSING: {
                return i18n.t("withdraw.record.processing");
            }
            case stateType.ERROR:
            case stateType.FAIL:
            case stateType.TTP_ERROR:
            case stateType.RECALL: {
                return i18n.t("withdraw.record.fail");
            }
            default: return "error";
        }
    }
    const getStateCls = (state) => {
        state = parseInt(state);
        switch (state) {
            case stateType.PROCESSING:
            case stateType.CHECKING: {
                return styles.status_pending;
            }
            case stateType.SUCCESS: {
                return styles.status_success;
            }
            case stateType.ERROR:
            case stateType.FAIL:
            case stateType.RECALL: {
                return styles.status_failed;
            }
            default: return styles.status_pending;
        }
    }
    const getStateLogo = (state) => {
        state = parseInt(state);
        switch (state) {
            case stateType.PROCESSING:
            case stateType.CHECKING: {
                return PendingLogo;
            }
            case stateType.SUCCESS: {
                return SuccssLogo;
            }
            case stateType.ERROR:
            case stateType.FAIL:
            case stateType.RECALL: {
                return FailedLogo;
            }
            default: return PendingLogo;
        }
    }

    const renderItemType = (item) => {
        const config = getWithdrawConfig(item.PixType);
        return (
            <div className={`${styles.pay_type_con} ${styles.title}`}>
                <img src={config.icon} />
                {config.name}
            </div>
        )
    }
    const renderContent = () => {
        if (status === REQ_STATUS.LOADING) return (<SmallLoading></SmallLoading>);
        if (recordList == null || recordList.length == 0) return (<WHistoryEmpty />);
        return (
            <Spring type="slideUp" className={styles.content}>
                {
                    recordList.map((item, index) => {
                        let amount = Number(item.WithDraw) + Number(item.ServiceFee);
                        let amount_str = global.DOLLAR + formatCash(amount);
                        // let time_str=formatDate(item.CreateDate*1000);
                        let time_str = item.CreateDate.split(".")[0];
                        let statusTxt = getStateTxt(item.State);
                        let status_cls = getStateCls(item.State);
                        return (
                            <button key={index} className={styles.item_con} onClick={() => {
                                setDetailInfo(item);
                                setShowDetails(true);
                            }}>
                                <div className={styles.item}>
                                    {
                                        renderItemType(item)
                                    }
                                    <div className={styles.title}>
                                        {amount_str}
                                    </div>
                                </div>
                                <div className={styles.item}>
                                    <div>{time_str}</div>
                                </div>
                                <div className={styles.item}>
                                    <CopyToClipboard text={item.OrderId} onCopy={() => {
                                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                                    }}>
                                        <div className={styles.payment_sn_con} onClick={(event) => {
                                            event.stopPropagation();
                                        }}>
                                            {item.OrderId}
                                            <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 ExchangeScore = Number(item.WithDraw);
        let Fee = Number(item.ServiceFee);
        let amount = ExchangeScore + Fee;
        let amount_str = global.DOLLAR + formatCash(amount);
        let status = parseInt(item.State);
        let statusTxt = getStateTxt(status);
        let status_cls = getStateCls(status);
        let Logo = getStateLogo(status);
        let time_str = item.CreateDate.split(".")[0];
        return (
            <Popup onClose={() => {
                setShowDetails(false)
            }} open={showDetails}>
                <div className={styles.detail}>
                    <div className={styles.top}>
                        <div>{i18n.t("withdraw.record.detail_title")}</div>
                        <div className={styles.status}>
                            <Logo className={styles.logo}></Logo>
                            <div className={status_cls}>
                                {statusTxt}
                            </div>
                        </div>
                        <div>{amount_str}</div>
                    </div>
                    <div className={styles.line}></div>
                    <div className={styles.bottom}>
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("withdraw.record.exchage")}</div>
                            <div>{global.DOLLAR + formatCash(ExchangeScore)}</div>
                        </div>
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("withdraw.record.fee")}</div>
                            <div>{global.DOLLAR + formatCash(Fee)}</div>
                        </div>
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("withdraw.record.time")}</div>
                            <div>{time_str}</div>
                        </div>
                        <div className={styles.item}>
                            <div
                                className={styles.label}>{i18n.t("withdraw.record.orderId")}</div>
                            <CopyToClipboard text={item.OrderId} onCopy={() => {
                                toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                            }}>
                                <div className={styles.number}>
                                    {item.OrderId}
                                    <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 WWithdrawRecord;