import styles from './styles.module.scss';
import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {reqAgentHistory} from "@features/api";
import {getAgentHistory, getAgentHistoryStatus} from "@features/agentSlice";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import Spring from "@components/Spring";
import {formatCash} from "@utils/helpers";
const i18n=global.i18n;
const WAgentHistory  = ({close}) => {
    const dispatch = useDispatch();
    const status=useSelector(getAgentHistoryStatus);
    const history=useSelector(getAgentHistory);
    useEffect(() => {
        dispatch(reqAgentHistory());
    }, []);
    const renderList=()=>{
        if (status===REQ_STATUS.LOADING){
            return (
                <div className={"w-100 h-100vh"}>
                    <SmallLoading/>
                </div>
            )
        }
        let len=history.length;
        return (
            <Spring type={"slideUp"} className={"d-flex flex-column g-1"}>
                {
                    history.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>
                                <span className={`${styles.sub_data_item} ${styles.text_green}`}>{i18n.t("agent.history.status_1")}</span>
                            </div>
                        )
                    })
                }
            </Spring>
        )
    }
    const renderContent=()=>{
        return (
            <div className={"d-flex flex-column g-1"}>
                <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.history.label_status")}</span>
                </div>
                {renderList()}
            </div>
        )
    }
    return (
        <div className={styles.container}>
            {renderContent()}
        </div>
    )
}
export default WAgentHistory;