import styles from './styles.module.scss';
import {useDispatch, useSelector} from "react-redux";
import {getMail, getMailStatus, getReadID} from "@features/mailSlice";
import Spring from "@components/Spring";
import React, {useEffect} from "react";
import {formatCash, formatDate} from "@utils/helpers";
import USD from "@assets/lvicon/USD.black.png";
import SvgIcon from "@components/SvgIcon";
import {reqMailDel, reqMailRead, reqMailTake} from "@features/api";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {toast} from "react-toastify";
const i18n=global.i18n;
const WMailDetail=({close})=>{
    const mailID=useSelector(getReadID);
    const data=useSelector(getMail(mailID));
    const dispatch=useDispatch();
    const mailTakeStatus=useSelector(getMailStatus("MAIL_TAKE"));
    useEffect(()=>{
        let MailStatus=0;
        if (data){
            MailStatus=parseInt(data.MailStatus);
            if (MailStatus===1){
                let MailID=data.MailID;
                dispatch(reqMailRead(MailID));
            }
        }
    },[])
    const onTake=()=>{
        if (mailTakeStatus===REQ_STATUS.LOADING)return;
        if (data){
            let MailID=data.MailID;
            dispatch(reqMailTake(MailID));
        }
    }
    const checkLockItem=(item)=>{
        if (item){
            let MailStatus=parseInt(item.MailStatus);
            let strkBonus=item.BonusString;
            if (strkBonus!=null&&strkBonus!==""){
                let blist=strkBonus.split(";");
                let bonus_0=blist[0];
                if (bonus_0!=null&&bonus_0!=""){
                    let arr=bonus_0.split(",");
                    let bonus=Number(arr[1]);
                    if (bonus!=NaN&&bonus>0){
                        if (MailStatus<3)return true;
                    }
                }
            }
        }
        return false;
    }
    const onDelItem=(item)=>{
        let locked=checkLockItem(item);
        if (locked){
            toast.warn(i18n.t("mail.TopTip_qxlqyxjl"),{toastId:"locked"});
            return;
        }
        dispatch(reqMailDel(item.MailID));
        if (close)close();
    }
    const renderBonus=()=>{
        let strkBonus=data.BonusString;
        // strkBonus="30000,10000;30000,1000;30000,0;30000,0;30000,0;30000,0;30000,0;30000,0;30000,0;"
        if (strkBonus===null||strkBonus==="")return (<></>);

        let blist=strkBonus.split(";");
        for (let i = 0; i < blist.length; i++) {
            let bonus=blist[i];
            if (bonus){
                if (bonus===""){
                    blist.splice(i,1);
                    i--;
                    continue;
                }
                let arr=bonus.split(",");
                let num=Number(arr[1]);
                if (num<=0||num===NaN){
                    blist.splice(i,1);
                    i--;
                }
            }
        }
        if (blist.length===0)return (<></>);
        let MailStatus=parseInt(data.MailStatus);
        let disabled=MailStatus>=3;
        // disabled=true
        return (
            <div className={styles.bonus_con}>
                <div className={styles.bonus_list}>
                    {
                        blist.map((item,index)=>{
                            if (item===null||item==="")return (<></>);
                            let bonus=item.split(",");
                            let num=bonus[1];
                            return (
                                <div key={index} className={styles.bonus_box}>
                                    <img className={styles.coin} src={USD}/>
                                    <div className={styles.num}>{"x"+formatCash(num,0)}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <button className={`button-green ${styles.rec_btn}`} disabled={disabled} onClick={()=>{
                    onTake();
                }}>
                    {
                        mailTakeStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"} />):(<>{i18n.t("mail.btn_Receive")}</>)
                    }
                </button>
            </div>
        )
    }
    const renderContent=()=>{
        let CreateTime=data.CreateTime;
        if (CreateTime){
            CreateTime=CreateTime.split(".").shift();
        }
        return (
            <Spring type="slideUp" className={styles.content}>
                <div className={styles.mail_title_con}>
                    <div className={styles.item_con}>
                        <div className={styles.title_item}>
                            <div>{i18n.t("mail.txtMail.titleTheme")}</div>
                            <div>{data.TitleString}</div>
                        </div>
                        <button onClick={()=>{
                            onDelItem(data);
                        }}>
                            <SvgIcon className={styles.icon} herf={"icon_Delete"}></SvgIcon>
                        </button>
                    </div>
                    <div className={styles.title_item}>
                        <div>{i18n.t("mail.txtMail.titleTime")}</div>
                        <div>{CreateTime}</div>
                    </div>
                    <div className={styles.item_line}></div>
                </div>
                <div className={styles.mail_con}>
                    <div className={styles.mail_content}>
                        {data.TextString}
                    </div>
                </div>
                {renderBonus()}
            </Spring>
        )
    }
    return (
        <div className={styles.container}>
            {
                data==null?(<></>):(renderContent())
            }
        </div>
    )
}
export default WMailDetail;
