import styles from './styles.module.scss';
import Spring from "@components/Spring";
import {useDispatch, useSelector} from "react-redux";
import {
    getAgentGetStatus,
    getAgentInfo, getAgentLink,
    getAgentStatus,
    getAgentSubs,
    getBonusList,
    getIsInit
} from "@features/agentSlice";
import link_icon from "@assets/agent/link.png";
// import doller_icon from "@assets/agent/doller_icon.png";
import policy_icon from "@assets/agent/policy.png";
import rank_icon from "@assets/agent/rank_icon.png";
import user_icon from "@assets/agent/user_icon.png";
import agent_icon from "@assets/agent/agent_icon.png";
import gold_icon from "@assets/agent/gold_icon.png";
import tree_icon from "@assets/singlesvg/tree_bai.svg";
import no_data from "@assets/mail/no_data.png";
import SvgIcon from "@components/SvgIcon";
import {CopyToClipboard} from "react-copy-to-clipboard";
import {toast} from "react-toastify";
import {formatCash, formatDate} from "@utils/helpers";
import {useNavigate} from "react-router-dom";
import {ROUTE_PATH} from "@constants/routes";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {reqAgentCheck, reqAgentGet} from "@features/api";
import {useEffect} from "react";
const i18n=global.i18n;
const WAgent=({close})=>{
    const navigate = useNavigate();
    const agentInfo=useSelector(getAgentInfo);
    const agentSubs=useSelector(getAgentSubs);
    const bonusList=useSelector(getBonusList);
    const agentGetStatus=useSelector(getAgentGetStatus);
    const agentStatus=useSelector(getAgentStatus);
    const dispatch=useDispatch();
    const isAgentInit=useSelector(getIsInit);
    const agentLink=useSelector(getAgentLink);
    const lvnum=4;
    useEffect(()=>{
        if (!isAgentInit){
            dispatch(reqAgentCheck());
        }
    },[])
    const getTeamUser=()=>{
        let teamNum=0;
        // for (let i = 0; i < lvnum; i++) {
        //     let num=agentInfo["downCount"+(i+1)];
        //     if (num!=null)teamNum+=num;
        // }
        for (const key in agentInfo) {
            if (key.startsWith("downCount")){
                let num=agentInfo[key];
                if (num!=null)teamNum+=Number(num);
            }
        }
        return teamNum;
    }
    const onGetBonus=(ID)=>{
        if (agentGetStatus[ID]===REQ_STATUS.LOADING)return;
        dispatch(reqAgentGet(ID));
    }
    const getDollerIcon=()=>{
        try {
            let DOLLAR=global.DOLLAR;
            let icon=require(`@assets/agent/doller_icon_${DOLLAR}.png`);
            return icon;
        }
        catch(err){
            return require(`@assets/agent/doller_icon_$.png`);
        }
    }
    const renderBase=()=>{
        let agentUrl=agentLink;
        let bonus=agentInfo.bonus?agentInfo.bonus:0;
        let bonusStr=formatCash(bonus);
        return (
            <div className={styles.base_con}>
                <div className={styles.base_item_con}>
                    <div className={styles.title_con}>
                        <span className={styles.title}>
                            <div className={styles.base_icon}>
                                 <img src={link_icon}/>
                            </div>
                            {i18n.t("agent.base.title_link")}
                        </span>
                    </div>
                    <div className={styles.item_con}>
                        <CopyToClipboard text={agentUrl} onCopy={() => {
                            toast.success(i18n.t("copy_success"),{toastId:  "copy_success"});
                        }}>
                            <div className={styles.item}>
                                <span className={styles.text_white}>{agentUrl}</span>
                                <SvgIcon className={styles.icon} herf={"icon_Copy"}></SvgIcon>
                            </div>
                        </CopyToClipboard>
                    </div>
                </div>
                {/*<div className={styles.base_item_con}>*/}
                {/*    <div className={styles.title_con}>*/}
                {/*        <span className={styles.title}>*/}
                {/*            <div className={styles.base_icon}>*/}
                {/*                 <img src={doller_icon}/>*/}
                {/*            </div>*/}
                {/*            {i18n.t("agent.base.title_bonus")}*/}
                {/*        </span>*/}
                {/*        <button className={`${styles.title} ${styles.text_white}`}>*/}
                {/*            {i18n.t("agent.base.history")}*/}
                {/*            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}></SvgIcon>*/}
                {/*        </button>*/}
                {/*    </div>*/}
                {/*    <div className={styles.item_con}>*/}
                {/*       <div className={styles.item}>*/}
                {/*            <div className={styles.item_value}>*/}
                {/*                <span className={styles.label}>{i18n.t("agent.base.value")}</span>*/}
                {/*                <span className={styles.text_line}></span>*/}
                {/*                <span className={styles.text_white}>{bonusStr}</span>*/}
                {/*            </div>*/}
                {/*       </div>*/}
                {/*        <button className={`button-green ${styles.base_button}`} disabled={bonus<=0}>*/}
                {/*            {i18n.t("agent.base.btn_claim")}*/}
                {/*        </button>*/}
                {/*    </div>*/}
                {/*</div>*/}
                <div className={styles.base_item_con}>
                    <div className={styles.title_con}>
                        <div className={`${styles.title} ${styles.itme_policy}`}>
                            <img src={policy_icon}/>
                            {i18n.t("agent.base.title_policy")}
                        </div>
                        <button className={`${styles.title} ${styles.text_white}`} onClick={()=>{
                            navigate(ROUTE_PATH.AGENT_POLICY);
                        }}>
                            {i18n.t("agent.base.details")}
                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}></SvgIcon>
                        </button>
                    </div>
                    <div className={styles.item_line}></div>
                </div>
            </div>
        )
    }
    const renderTodayInfo=()=>{
        let date=formatDate(Date.now(),"yyyy-MM-dd");
        let level=agentInfo.level?agentInfo.level:0;
        let totalUser=getTeamUser();
        let directUser=0;
        let revenue=0;
        let bonus=0;
        if (agentInfo["downCount"+(1)])directUser=agentInfo["downCount"+(1)];
        if (agentInfo.SubTotal!=null)revenue=formatCash(agentInfo.SubTotal,2,true);
        if (agentInfo.bonus!=null)bonus=formatCash(agentInfo.bonus,2,true);
        return (
            <div className={"d-flex flex-column g-1"}>
                <div className={`${styles.info_item} ${styles.info_item_top}`}>
                    <div className={styles.title_con}>
                        <div className={`${styles.title} ${styles.text_white}`}>
                            <div className={styles.base_icon}>
                                <img src={rank_icon}/>
                            </div>
                            {date}
                        </div>
                        <div className={styles.title}>
                            <div className={styles.text_line}></div>
                            <span>{i18n.t("agent.today.label_level")}</span>
                            <span className={styles.text_white_big}>{level}</span>
                        </div>
                    </div>
                </div>
                <div className={`${styles.info_item} ${styles.info_item_middle}`}>
                    <div className={styles.title_con}>
                        <div className={styles.title}>
                            <div className={styles.base_icon}>
                                <img src={user_icon}/>
                            </div>
                            {i18n.t("agent.today.label_team_size")}
                        </div>
                        <span className={styles.text_white_big}>{totalUser}</span>
                    </div>
                </div>
                <div className={`${styles.info_item} ${styles.info_item_middle}`}>
                    <div className={styles.title_con}>
                        <div className={styles.title}>
                            <div className={styles.base_icon}>
                                <img src={agent_icon}/>
                            </div>
                            {i18n.t("agent.today.label_direct_agent")}
                        </div>
                        <span className={styles.text_white_big}>{directUser}</span>
                    </div>
                </div>
                <div className={`${styles.info_item} ${styles.info_item_middle}`}>
                    <div className={styles.title_con}>
                        <div className={styles.title}>
                            <div className={styles.base_icon}>
                                <img src={gold_icon}/>
                            </div>
                            {i18n.t("agent.today.label_revenue")}
                        </div>
                        <span className={styles.text_white_big}>{global.DOLLAR+revenue}</span>
                    </div>
                </div>
                <div className={`${styles.info_item} ${styles.info_item_bottom}`}>
                    <div className={styles.title_con}>
                        <div className={styles.title}>
                            <div className={styles.base_icon}>
                                <img src={gold_icon}/>
                            </div>
                            {i18n.t("agent.today.label_commission")}
                        </div>
                        <span className={styles.text_white_big}>{global.DOLLAR+bonus}</span>
                    </div>
                </div>
            </div>
        )
    }
    const renderEmpty=(isImg=true)=>{
        return (
            <div className={`${styles.data_empty} ${!isImg?styles.data_empty_text:''}`}>
                {
                    isImg ? <img src={no_data}/>:(<></>)
                }
                <span>{i18n.t("agent.no_data")}</span>
            </div>
        )
    }
    const renderSubsList=()=>{
        let len=agentSubs.length;
        if (len<=0)return renderEmpty();
        return (
            <>
                {
                    agentSubs.map((item,index)=>{
                        let name=item.NickName;
                        let SubTotal=item.SubTotal;
                        let bonus=item.bonus;
                        let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
                        return (
                            <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
                                <span className={styles.sub_data_item}>{name}</span>
                                <span className={styles.sub_data_item}>{global.DOLLAR+formatCash(SubTotal, 2, true)}</span>
                                <span className={styles.sub_data_item}>{global.DOLLAR+formatCash(bonus, 2, true)}</span>
                            </div>
                        )
                    })
                }
            </>
        )
    }
    const renderSubs=()=>{
        return (
            <div className={"d-flex flex-column g-1"}>
                <div className={`${styles.info_item} ${styles.info_item_top}`}>
                    <div className={styles.title_con}>
                        <div className={`${styles.title} ${styles.text_white}`}>
                            <div className={styles.base_icon}>
                                <img src={tree_icon}/>
                            </div>
                            {i18n.t("agent.subs.title")}
                        </div>
                    </div>
                </div>
                <div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
                    <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_name")}</span>
                    <div className={styles.text_line}></div>
                    <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_revenue")}</span>
                    <div className={styles.text_line}></div>
                    <span className={styles.sub_data_item}>{i18n.t("agent.subs.label_commision")}</span>
                </div>
                {renderSubsList()}
            </div>
        )
    }
    const renderAvailabelList=()=>{
        if (bonusList==null||bonusList.length===0)return renderEmpty(false);
        let len=bonusList.length;
        return (
            <>
                {
                    bonusList.map((item,index)=>{
                        let Date=item.Date+"";
                        let DateStr=Date.substring(0,4)+"-"+Date.substring(4,6)+"-"+Date.substring(6,8);
                        let bonus=item.bonus;
                        let bonusStr=global.DOLLAR+formatCash(bonus,2,true);
                        let bg_style=index===len-1?styles.info_item_bottom:styles.info_item_middle;
                        return (
                            <div key={index} className={`${styles.info_item_title} ${bg_style}`}>
                                <span className={styles.sub_data_item}>{DateStr}</span>
                                <span className={styles.sub_data_item}>{bonusStr}</span>
                                <div className={`${styles.sub_data_item} d-flex align-items-center justify-content-center`}>
                                    <button className={`${styles.button_claim}`} onClick={()=>{
                                        onGetBonus(item.ID);
                                    }}>
                                        {
                                            agentGetStatus[item.ID]===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}></SmallLoading>):(i18n.t("agent.bonus.btn_claim"))
                                        }
                                        {/*{i18n.t("agent.bonus.btn_claim")}*/}
                                    </button>
                                </div>
                            </div>
                        )
                    })
                }
            </>
        )
    }
    const renderAvailable = () => {
        return (
            <div className={"d-flex flex-column g-1"}>
                <div className={`${styles.info_item} ${styles.info_item_top}`}>
                    <div className={styles.title_con}>
                        <div className={`${styles.title} ${styles.text_white}`}>
                            <div className={styles.base_icon}>
                                <img src={getDollerIcon()}/>
                            </div>
                            {i18n.t("agent.bonus.title_bonus")}
                        </div>
                        <button className={`${styles.title} ${styles.text_white}`} onClick={()=>{
                            navigate(ROUTE_PATH.AGENT_HISTORY);
                        }}>
                            <div className={styles.text_line}></div>
                            <span>{i18n.t("agent.bonus.history")}</span>
                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}></SvgIcon>
                        </button>
                    </div>
                </div>
                <div className={`${styles.info_item_title} ${styles.info_item_title_middle} ${styles.text_white}`}>
                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_date")}</span>
                    <div className={styles.text_line}></div>
                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_commision")}</span>
                    <div className={styles.text_line}></div>
                    <span className={styles.sub_data_item}>{i18n.t("agent.bonus.label_claim")}</span>
                </div>
                {renderAvailabelList()}
            </div>
        )
    }
    return (
        <div className={styles.container}>
            {
                agentStatus===REQ_STATUS.LOADING?(<SmallLoading></SmallLoading>):(
                    <Spring type="slideUp" className={styles.content}>
                        {renderBase()}
                        {renderAvailable()}
                        {renderTodayInfo()}
                        {renderSubs()}
                    </Spring>
                )
            }
        </div>
    )
}
export default WAgent;