web2468/src/widgets/WCashWheel/index.jsx

import styles from "./styles.module.scss";
import WWheel from "@widgets/WCashWheel/WWheel/WWheel";
import Spring from "@components/Spring";
import cash_2 from "@assets/wheel/cash_2.png";
import coin from "@assets/wheel/pix_2.png";
import {useDispatch, useSelector} from "react-redux";
import {getBonusStatus, getMyRecord, getRecord, getTurnplate} from "@features/turnplateSlice";
import {formatCash, stringFormat} from "@utils/helpers";
import React, {useEffect, useState} from "react";
import {Autoplay, EffectCube,EffectCoverflow} from "swiper";
import {Swiper, SwiperSlide} from "swiper/react";
import styled from 'styled-components/macro';
import CountUp from "react-countup";
import Popup from "@components/Popup";
import WShare from "@widgets/WCashWheel/WShare/WShare";
import {isLogined} from "@features/mainSlice";
import {useNavigate} from "react-router";
import {ROUTE_PATH} from "@constants/routes";
import SmallLoading from "@components/SmallLoading";
import WRetainPop from "@widgets/WCashWheel/WRetainPop/WRetainPop";
import {reqTurnplateBonus} from "@features/api";
import {REQ_STATUS} from "@api/config";
const i18n=global.i18n;
const StyledSwiper=styled(Swiper)`
.swiper-wrapper{
    transition-timing-function: cubic-bezier(1.00, 1.00, 0.00, 0.00);
 }
`
const WCashWheel=({close})=>{
    let turnplate=useSelector(getTurnplate);
    // if(turnplate==null)turnplate={collect_amount:0,total_amount:10000};
    const record=useSelector(getRecord);
    const myrecord=useSelector(getMyRecord);
    const [recordIndex,setRecordIndex]=useState(0);
    const recordLog=[record,myrecord];
    const [swiper, setSwiper] = useState(null);
    const [openInfoBox,setOpenInfoBox]=useState(false);
    const [openShare,setOpenShare]=useState(false);
    const isLogin=useSelector(isLogined);
    const navigate=useNavigate();
    const dispatch = useDispatch();
    const bonusStatus=useSelector(getBonusStatus);
    useEffect(() => {
        if (swiper) {
            swiper.update();
        }
    }, [swiper]);
    useEffect(()=>{

    },[recordIndex])
    const formatPhone=(phone)=>{
        let tstr=phone.substring(1,phone.length-2);
        phone=phone.replace(tstr,'*'.repeat(tstr.length));
        if (!phone.startsWith("55"))phone="55"+phone;
        return phone;
    }
    const checkClickWD=()=>{
        let collect=turnplate.collect_amount;
        let total=turnplate.total_amount;
        if (collect>=total){
            if (bonusStatus!==REQ_STATUS.LOADING){
                dispatch(reqTurnplateBonus());
            }
        }
        else
        {
            setOpenInfoBox(true);
        }
    }
    const renderCashMain=()=>{
        let collect=turnplate.collect_amount;
        // collect=10000;
        let total=turnplate.total_amount;
        let left=total-collect;
        let isEnableCash=collect>0;
        let progress=((collect/total)*100).toFixed(2);
        return (
            <div className={styles.cash_main_con}>
                <div className={styles.cash_main}>
                    <div className={styles.have_cash}>
                        <img className={styles.cash_img} src={cash_2}/>
                        <CountUp
                            start={0}
                            end={Number(formatCash(collect))}
                            duration={1}
                            separator=" "
                            decimals={2}
                            prefix={global.DOLLAR+" "}
                            startOnMount
                        >
                            {({ countUpRef, start }) => {
                                if (countUpRef.current){
                                    let current=countUpRef.current;
                                    if (current.value!==collect){
                                        start();
                                        current.value=collect;
                                    }
                                }
                                return (
                                    <div ref={countUpRef} className={styles.cash_text}/>
                                )
                            }}
                        </CountUp>
                        {/*<div className={styles.cash_text}>{global.DOLLAR+" "+formatCash(collect)}</div>*/}
                        <button className={styles.cash_btn} disabled={!isEnableCash} onClick={()=>{
                            // setOpenInfoBox(true);
                            checkClickWD();
                        }}>
                            {
                                bonusStatus===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"}/>):(
                                    <>
                                        <img className={styles.icon} src={coin}/>
                                        {i18n.t("turnplate.cash_btn")}
                                    </>
                                )
                            }
                        </button>
                    </div>
                    <div className={styles.progress}>
                        <div>{progress+"%"}</div>
                        <div className={styles.bar}>
                            <span className={styles.dot} style={{width:progress+"%"}}>
                                <div className={styles.custor}></div>
                            </span>
                        </div>
                    </div>
                    <div className={styles.need_cash}>
                        <div>{i18n.t("turnplate.need_tip")}</div>
                        <div className={styles.need_txt}>{formatCash(left)}</div>
                        <div>{i18n.t("turnplate.need_tip_1")}</div>
                    </div>
                </div>
            </div>
        )
    }
    const renderRecord=()=>{
        let list=recordLog[recordIndex];
        return (
            <div className={styles.record_con}>
                <div className={styles.record}>
                    <div className={styles.record_tab}>
                        <button disabled={recordIndex===0} onClick={()=>{
                            setRecordIndex(0);
                        }}>
                            {i18n.t("turnplate.record.tab_0")}
                        </button>
                        <button disabled={recordIndex===1} onClick={()=>{
                            setRecordIndex(1);
                        }}>
                            {i18n.t("turnplate.record.tab_1")}
                        </button>
                    </div>
                    {
                        list==null||list.length===0?(<></>):(
                            <StyledSwiper
                                className={styles.swiper_list}
                                onSwiper={setSwiper}
                                direction={"vertical"}
                                spaceBetween={0}
                                slidesPerView={5}
                                loop={true}
                                autoplay={{delay: 0, disableOnInteraction: false}}
                                effect="fade"
                                fadeEffect={{crossFade: true}}
                                modules={[Autoplay]}
                                speed={800}
                            >
                                {
                                    list.map((item,index)=>{
                                        let phone=formatPhone(item.phone);
                                        let name=item.name;
                                        let amount=item.amount;
                                        return (
                                            <SwiperSlide key={index}>
                                                <div className={styles.swiper_item}>
                                                    <div>{phone}</div>
                                                    <div className={styles.name}>{name}</div>
                                                    <div className={styles.coins_con}>
                                                        {"+"+amount}
                                                        <div className={styles.unit}>{global.DOLLAR}</div>
                                                    </div>
                                                </div>
                                            </SwiperSlide>
                                        )
                                    })
                                }
                            </StyledSwiper>
                        )
                    }
                </div>
            </div>
        )
    }
    const renderHelp=()=>{
        let arr=Array.from({ length: 6 }, (_, index) => index+1);
        return (
            <div className={styles.rule_con}>
                <div className={styles.rule}>
                    <div className={styles.title}>{i18n.t("turnplate.rule.title")}</div>
                    {
                        arr.map((item,index)=>{
                           return (
                               <div key={index}>{i18n.t("turnplate.rule.rule_"+item)}</div>
                           )
                        })
                    }
                </div>
            </div>
        )
    }
    const renderInfoBox=()=>{
        let collect=turnplate.collect_amount;
        // collect=9556;
        let total=turnplate.total_amount;
        let left=total-collect;
        return (
            <Popup open={openInfoBox} onClose={()=>{
                setOpenInfoBox(false);
            }}>
                <div className={styles.info_box}>
                    <div className={styles.title}>{i18n.t("turnplate.info_box.title")}</div>
                    <div className={styles.content}>
                        <div className={styles.cash_con}>
                            <div className={styles.tips}>
                                {i18n.t("turnplate.info_box.tips")}
                            </div>
                            <CountUp
                                start={openInfoBox?0:Number(formatCash(collect))}
                                end={Number(formatCash(collect))}
                                duration={1}
                                separator=" "
                                decimals={2}
                                suffix={" BRL"}

                            >
                                {({ countUpRef, start }) => {
                                    return (
                                        <div ref={(ref)=>{
                                            countUpRef.current=ref;
                                            if (openInfoBox)start();
                                        }} className={styles.cash}/>
                                    )
                                }}
                            </CountUp>
                        </div>
                        <div className={styles.step_con}>
                            <div>{i18n.t("turnplate.info_box.step_title")}</div>
                            <div className={styles.step_content}>
                                <div className={`${styles.step_item} ${collect>0?styles.active:''}`}>{i18n.t("turnplate.info_box.step_0")}</div>
                                <div className={`${styles.step_item} ${collect>0?styles.active:''}`}>{stringFormat(i18n.t("turnplate.info_box.step_1"),[formatCash(left)])}</div>
                                <div className={`${styles.step_item} ${collect>=total?styles.active:''}`}>{stringFormat(i18n.t("turnplate.info_box.step_2"),[formatCash(total,0)])}</div>
                            </div>
                        </div>
                        <button className={styles.invite_btn} onClick={()=>{
                            setOpenInfoBox(false);
                            checkOpenShare();
                        }}>
                            {i18n.t("turnplate.info_box.btn_invite")}
                        </button>
                    </div>
                </div>
            </Popup>
        )
    }
    const renderShare=()=>{
        return (
            <WShare open={openShare} onClose={()=>{
                setOpenShare(false);
            }}></WShare>
        )
    }
    const checkOpenShare=()=>{
        if (!isLogin){
            navigate(ROUTE_PATH.SIGN_IN);
            return;
        }
        setOpenShare(true);
    }
    const renderMain=()=>{
        return (
            <Spring type={"slideUp"} className={styles.content}>
                {renderCashMain()}
                <WWheel openShare={checkOpenShare}></WWheel>
                {renderRecord()}
                {renderHelp()}
                {renderInfoBox()}
                {renderShare()}
            </Spring>
        )
    }
    return (
        <div className={styles.container}>
            {
                turnplate==null?(<SmallLoading></SmallLoading>):(renderMain())
            }
        </div>
    )
}
export default WCashWheel;