import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import cash_2 from "@assets/wheel/cash_2.png";
import CountUp from "react-countup";
import { formatCash, localStorageSet, stringFormat } 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 { getBonusStatus, getMyRecord, getRecord, getTurnplate } from "@features/turnplateSlice";
import React, { useEffect, useState } from "react";
import styled from 'styled-components/macro';
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, EffectCube, EffectCoverflow, Virtual } from "swiper/modules";
import WITHDRAW_TYPE from "@constants/withdraw_types";
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, openShare, closeP }) => {
    let turnplate = useSelector(getTurnplate);
    if (turnplate == null) turnplate = { total_amount: 10000, collect_amount: 0 };
    let collect = turnplate.collect_amount;
    let total = turnplate.total_amount;

    let left = total - collect;
    let isEnableCash = left <= 0;
    let progress = ((collect / total) * 100).toFixed(2);
    if (progress > 100) progress = 100;

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

                        >
                            {({ countUpRef, start }) => {
                                return (
                                    <div ref={(ref) => {
                                        countUpRef.current = ref;
                                        if (open) {
                                            start();
                                        }
                                    }} className={styles.cash_text} />
                                );
                            }}
                        </CountUp>
                        {/*<div className={styles.cash_text}>{global.DOLLAR+" "+formatCash(collect)}</div>*/}
                    </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 ? (
                                <>
                                    <div>Withdraw</div>
                                    <div className={styles.need_txt}>$ {formatCash(collect)}</div>
                                    <div>now.</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();
            // navigate(ROUTE_PATH.SHARE);
            // global.fixedScore = { score: collect };
            // navigate(ROUTE_PATH.REFERRAL);
            global.openFixedWithdraw && global.openFixedWithdraw({
                type: WITHDRAW_TYPE.SHARE,
            });
        };
        return (
            <div className={styles.btn_con}>
                {
                    isEnableCash ? (
                        <>
                            <button className={styles.share_btn} onClick={handleClickWithdraw}>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, setRecordIndex] = useState(0);
    const [swiper, setSwiper] = useState(null);
    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 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={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}>
                    1、Withdraw once you reach $40
                    <br />
                    2、Earn $0.1-5 when your friends deposit
                    <br />
                    3、Earn $0.01-0.5 when your friends register and play
                    <br />
                    4、Receive a 1% bonus on each deposit made by your friend
                </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;
