game_web_uk/src/widgets/WCashWheel/WRetainPop/WRetainPop.jsx

import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import CountUp from "react-countup";
import { formatCash, localStorageSet } from "@utils/helpers";
import { useSelector } from "react-redux";
import { LOCAL_WHEEL_RETAIN } from "@constants/localkey";
import { useNavigate } from "react-router";
import { ROUTE_PATH } from "@constants/routes";
import { getMyRecord, getRecord, getTurnplate } from "@features/turnplateSlice";
import React, { useState } from "react";
import styled from 'styled-components/macro';
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Virtual } from "swiper/modules";
import WITHDRAW_TYPE from "@constants/withdraw_types";
import { Trans } from "react-i18next";
const i18n = global.i18n;
const StyledSwiper = styled(Swiper)`
    .swiper-wrapper{
        transition-timing-function: cubic-bezier(1.00, 1.00, 0.00, 0.00);
     }
`;
const WRetainPop = ({ open, onClose, closeP }) => {
    let turnplate = useSelector(getTurnplate);
    if (turnplate == null) turnplate = { total_amount: 10000, collect_amount: 0 };
    let collect = Number(turnplate.collect_amount) || 0;
    let total = Number(turnplate.total_amount) || 0;

    let left = Math.max(total - collect, 0);
    let isEnableCash = total > 0 && collect >= total;
    let progress = (total > 0 ? Math.min(Math.max((collect / total) * 100, 0), 100) : 0).toFixed(2);

    const clearRetain = () => {
        localStorageSet(LOCAL_WHEEL_RETAIN, Date.now());
    };
    const renderMain = () => {


        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
                            key={`${open}-${collect}`}
                            start={!open ? Number(formatCash(collect)) : 0}
                            end={Number(formatCash(collect))}
                            duration={1}
                            separator=" "
                            decimals={2}
                            prefix={global.DOLLAR + " "}
                            startOnMount

                        >
                            {({ countUpRef }) => {
                                return (
                                    <div ref={countUpRef} className={styles.cash_text} />
                                );
                            }}
                        </CountUp>
                    </div>
                    <div className={styles.progress}>
                        <div className={styles.progressTip}>{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}>
                        {
                            isEnableCash ? (
                                <Trans
                                    i18nKey="cashWheel.retain.withdraw_now"
                                    values={{ amount: `${global.DOLLAR} ${formatCash(collect)}` }}
                                    components={{
                                        line1: <div />,
                                        amount: <div className={styles.need_txt} />,
                                        line3: <div />
                                    }}
                                />
                            ) : (
                                <>
                                    <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 navigate = useNavigate();
    const renderBtns = () => {
        const handleClickShare = (e) => {
            if (e) e.stopPropagation();
            clearRetain();
            if (onClose) onClose();
            navigate(ROUTE_PATH.SHARE);
        };
        const handleClickWithdraw = (e) => {
            if (e) e.stopPropagation();
            clearRetain();
            if (onClose) onClose();
            global.openFixedWithdraw && global.openFixedWithdraw({
                type: WITHDRAW_TYPE.SHARE,
            });
        };
        return (
            <div className={styles.btn_con}>
                {
                    isEnableCash ? (
                        <>
                            <button className={styles.share_btn} onClick={handleClickWithdraw}>{i18n.t('cashWheel.withdraw')}</button>
                        </>
                    ) : (
                        <>
                            <button className={styles.share_btn} onClick={handleClickShare}>{i18n.t("turnplate.retain_pop.btn_share")}</button>
                        </>
                    )
                }

            </div>
        );
    };
    const record = useSelector(getRecord);
    const myrecord = useSelector(getMyRecord);
    const recordLog = [record, myrecord];
    const [recordIndex] = useState(0);
    const [, setSwiper] = useState(null);
    const formatPhone = (phone) => {
        let normalized = String(phone ?? '');
        if (!normalized) return '';
        let tstr = normalized.substring(1, Math.max(normalized.length - 2, 1));
        normalized = normalized.replace(tstr, '*'.repeat(tstr.length));
        if (!normalized.startsWith("55")) normalized = "55" + normalized;
        return normalized;
    };
    const renderRecord = () => {
        let list = recordLog[recordIndex];
        return (
            <div className={styles.record_con}>
                <div className={styles.record}>
                    {
                        !Array.isArray(list) || list.length === 0 ? (<></>) : (
                            <StyledSwiper
                                className={styles.swiper_list}
                                onSwiper={setSwiper}
                                direction={"vertical"}
                                spaceBetween={0}
                                slidesPerView={1}
                                loop={true}
                                autoplay={{ delay: 0, disableOnInteraction: false }}
                                effect="fade"
                                fadeEffect={{ crossFade: true }}
                                modules={[Autoplay, Virtual]}
                                speed={1600}
                                virtual={true}
                            >
                                {
                                    list.map((item, index) => {
                                        let phone = formatPhone(item.phone);
                                        let name = item.name;
                                        let amount = item.amount;
                                        return (
                                            <SwiperSlide key={index} virtualIndex={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 renderTips = () => {
        return (
            <div className={styles.btTips}>
                <Trans
                    i18nKey="cashWheel.retain.tips"
                    components={{
                        br: <br />
                    }}
                />
            </div>
        );
    };
    return (
        <Popup open={open} onClose={(e) => {
            if (e) e.stopPropagation();
            clearRetain();
            if (onClose) onClose();
            if (closeP) closeP();
        }}>
            <div className={styles.container}>
                <div className={styles.title}>{i18n.t("turnplate.retain_pop.title")}</div>
                <div className={styles.tips}>{i18n.t("turnplate.retain_pop.tips")}</div>
                {renderMain()}
                {renderBtns()}
                {renderRecord()}

                {renderTips()}
            </div>
        </Popup>
    );
};
export default WRetainPop;