import styles from './styles.module.scss';
import BackgroundImgix from "@components/Imgix/BackgroundImgix";
import {APP_IMGIX_URL} from "@api/config";
import LazyImgix from "@components/Imgix/LazyImgix";
import {useDispatch, useSelector} from "react-redux";
import {getAgentLevels, getIsInit} from "@features/agentSlice";
import {useEffect} from "react";
import {reqAgentCheck} from "@features/api";
import {formatLongChips} from "@utils/helpers";
const i18n=global.i18n;
const WAgentPolicy=({close})=>{
    const titlePath=require(`@assets/agent/titls_${i18n.language}.png`);
    const stepList=Array.from({ length: 3 }, (_, index) => index+1);
    const isAgentInit=useSelector(getIsInit);
    const dispatch=useDispatch();
    const levels=useSelector(getAgentLevels);
    useEffect(()=>{
        if (!isAgentInit){
            dispatch(reqAgentCheck());
        }
    },[])
    const renderStepList=()=>{
        return (
            <div className={styles.step_con}>
                {
                    stepList.map((item,index)=>{
                        return (
                            <div key={index} className={styles.step_item}>
                                <img src={require(`@assets/agent/${item}.png`)}/>
                                {i18n.t(`agentPolicy.step_des_${item}`)}
                            </div>
                        )
                    })
                }
            </div>
        )
    }
    const renderExample=()=>{
        return (
            <div className={styles.example_con}>
                {i18n.t("agentPolicy.example")}
                {/*<img src={require("@assets/agent/pt1.png")}/>*/}
                <LazyImgix src={APP_IMGIX_URL+"bg/agent/pt1.png"} width={881}></LazyImgix>
            </div>
        )
    }
    const renderTeamInfo=()=>{
        return (
            <div className={styles.team_con}>
                <span className={styles.title}>
                    {i18n.t("agentPolicy.team_info.title")}
                </span>
                <div className={styles.des_info}>
                    <span>{i18n.t("agentPolicy.team_info.des_1")}</span>
                    <span className={styles.color_2}>{i18n.t("agentPolicy.team_info.des_2")}</span>
                    <span className={styles.color_3}>{i18n.t("agentPolicy.team_info.des_3")}</span>
                </div>
                <div className={styles.calculate_info}>
                    <span className={`${styles.title_1} ${styles.color_4}`}>
                        {i18n.t("agentPolicy.team_info.title_1")}
                    </span>
                    <div className={styles.info_num}>
                        <span>{"200000 X 7%"}</span>
                        <span className={styles.color_5}>{"-"}</span>
                        <span className={styles.color_2}>{"50000 X 5%"}</span>
                        <span className={styles.color_5}>{"-"}</span>
                        <span className={styles.color_3}>{"20000 X 4%"}</span>
                    </div>
                </div>
            </div>
        )
    }
    const renderLevels=()=>{
        return (
            <div className={styles.levels_con}>
                <span className={styles.level_top}>
                    {i18n.t("agentPolicy.levels.title")}
                </span>
                <div className={styles.level_item}>
                    <span className={`${styles.sub_item} ${styles.left} ${styles.sub_title}`}>
                        {i18n.t("agentPolicy.levels.label_1")}
                    </span>
                    <span className={`${styles.sub_item} ${styles.center} ${styles.sub_title}`}>
                        {i18n.t("agentPolicy.levels.label_2")}
                    </span>
                    <span className={`${styles.sub_item} ${styles.right} ${styles.sub_title}`}>
                        {i18n.t("agentPolicy.levels.label_3")}
                    </span>
                </div>
                {
                    levels.map((item,index)=>{
                        let bg_index=index%2;
                        let BRL=item.BRL;
                        let Rate=(Number(item.Rate)*100).toFixed(1)+"%";
                        let cash=formatLongChips(BRL);
                        return (
                            <div key={index} className={styles.level_item}>
                                <span
                                    className={`${styles.sub_item} ${styles.left} ${styles["background_" + bg_index]}`}>{item.Level}</span>
                                <div
                                    className={`${styles.sub_item} ${styles.center} ${styles["background_" + bg_index]}`}>
                                    <div className={'d-flex align-items-center justify-content-between w-100 h-100'}>
                                        <span>{global.DOLLAR}</span>
                                        <span>{cash}</span>
                                    </div>
                                </div>
                                <span
                                    className={`${styles.sub_item} ${styles.right} ${styles["background_" + bg_index]}`}>{Rate}</span>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
    return (
        <div className={styles.container}>
            <div className={styles.content_bg}>
                {/*<div className={styles.title_bg}>*/}
                {/*    <img className={styles.title} src={titlePath}/>*/}
                {/*</div>*/}
                <BackgroundImgix className={styles.title_bg} src={APP_IMGIX_URL+"bg/agent/titlebg.png"} imgixParams={{width:1125}}>
                    <img className={styles.title} src={titlePath}/>
                </BackgroundImgix>
                <div className={styles.bottom_bg}></div>
            </div>
            <div className={styles.content}>
                <div className={styles.bg_gap}></div>
                <div className={styles.detail_con}>
                    {renderStepList()}
                    {renderExample()}
                    {renderTeamInfo()}
                    {renderLevels()}
                </div>
            </div>
        </div>
    )
}
export default WAgentPolicy;