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";
const i18n = global.i18n;
const StyledSwiper = styled(Swiper)`
    .swiper-wrapper{
        transition-timing-function: cubic-bezier(1.00, 1.00, 0.00, 0.00);
     }
`;
const WInviteRecordPop = ({ open, onClose, openShare, closeP }) => {
    let turnplate = useSelector(getTurnplate);
    if (turnplate == null) turnplate = { total_amount: 10000, collect_amount: 0 };
    const clearRetain = () => {
        localStorageSet(LOCAL_WHEEL_RETAIN, Date.now());
    };
    const renderMain = () => {
        let collect = turnplate.collect_amount;
        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={!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}>
                        <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 = () => {
        let collect = turnplate.collect_amount;
        return (
            <div className={styles.btn_con}>
                <button className={styles.share_btn} onClick={(e) => {
                    if (e) e.stopPropagation();
                    clearRetain();
                    if (onClose) onClose();
                    // if (openShare)openShare()
                    navigate(ROUTE_PATH.SHARE);
                }}>{i18n.t("turnplate.retain_pop.btn_share")}</button>
                <button onClick={(e) => {
                    if (e) e.stopPropagation();
                    clearRetain();
                    if (onClose) onClose();
                    if (closeP) closeP();
                }} className={styles.giveup_btn}>{stringFormat(i18n.t("turnplate.retain_pop.btn_giveup"), [formatCash(collect)])}</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={6}
                                loop={true}
                                autoplay={{ delay: 0, disableOnInteraction: false }}
                                effect="fade"
                                fadeEffect={{ crossFade: true }}
                                modules={[Autoplay, Virtual]}
                                speed={800}
                                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>
        );
    };

    // console.error("myrecord", myrecord);

    let data = [
        // {
        //     id: "123456789",
        //     time: "24.06.2025",
        //     bonus: "100"
        // }

    ];

    return (
        <Popup open={open} onClose={(e) => {
            if (e) e.stopPropagation();
            // clearRetain();
            if (onClose) onClose();
            if (closeP) closeP();
        }} btnCloseType="0" popupClass={styles.popup} timeout={myrecord == null || myrecord.length === 0 ? 0 : 500}>
            <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()} */}

                <div className={styles.title}>LIST OF INVITATIONS</div>

                <div className={styles.list_title}>
                    <span>NAME</span>
                    <span>PHONE</span>
                    <span>BONUS</span>
                </div>
                <div className={styles.list}>
                    {
                        myrecord.map((item, index) => {
                            return (
                                <div className={`${styles.list_title} ${styles.list_item}`}>
                                    <span className={styles.id}>{item.name}</span>
                                    <span className={styles.time}>{item.phone}</span>
                                    <span className={styles.bonus}>${parseFloat(item.amount || 0).toFixed(2)}</span>
                                </div>
                            );
                        })
                    }
                </div>


                {
                    myrecord == null || myrecord.length === 0 ? (<div className={styles.emptyTip}>
                        You can receive a prize if invited players or friends
                        <br />
                        link a cell phone or make a recharge.
                    </div>) : <></>
                }
            </div>
        </Popup>
    );
};
export default WInviteRecordPop;
