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/pix.svg';
import {reqWithdrawRecord} from "@features/api";
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 status=useSelector(getWithdrawRecordStatus);
    const recordList=useSelector(getWithdrawRecord);
    const [showDetails,setShowDetails]=useState(false);
    const [detailInfo,setDetailInfo]=useState(null);
    const dispatch =useDispatch();
    useEffect(()=>{
        dispatch(reqWithdrawRecord())
    },[])
    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 renderContent=()=>{
        if (status===REQ_STATUS.LOADING)return (<SmallLoading></SmallLoading>);
        if (recordList==null)return (<></>);
        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}>
                                    <div className={`${styles.pay_type_con} ${styles.title}`}>
                                        <PixLogo className={styles.logo}></PixLogo>
                                        PIX
                                    </div>
                                    <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"));
                                    }}>
                                        <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"));
                            }}>
                                <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;