import Popup from "@components/Popup";
import React from "react";
import styles from "./styles.module.scss"
import {useSelector} from "react-redux";
import {getRecord, getTurnplate} from "@features/turnplateSlice";
import icon_cash from "@assets/wheel/cash_2.png";
import icon_coin from "@assets/wheel/pix_2.png";
import {formatCash, stringFormat} from "@utils/helpers";
import cash_2 from "@assets/wheel/cash_2.png";
import CountUp from "react-countup";
import coin from "@assets/wheel/pix_2.png";
import {Autoplay, Virtual} from "swiper/modules";
import {Swiper, SwiperSlide} from "swiper/react";
import styled from 'styled-components/macro';
const i18n=global.i18n;
const StyledSwiper=styled(Swiper)`
.swiper-wrapper{
    transition-timing-function: cubic-bezier(1.00, 1.00, 0.00, 0.00);
 }
`
const WPopInfo=({open,onClose,openShare})=>{
    let turnplate=useSelector(getTurnplate);
    if (turnplate==null)turnplate={total_amount:10000,collect_amount:0}
    const record=useSelector(getRecord);
    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 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={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>*/}
                    </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>
                    <button className={styles.btn_invite} onClick={()=>{
                        if (onClose)onClose();
                        if(openShare)openShare();
                    }}>
                        {i18n.t("turnplate.pop_info.btn_invite")}
                    </button>
                </div>
            </div>
        )
    }
    const renderRecord=()=>{
        let list=record;
        return (
            <div className={styles.record_con}>
                <div className={styles.record}>
                    {
                        list==null||list.length===0?(<></>):(
                            <StyledSwiper
                                className={styles.swiper_list}
                                direction={"vertical"}
                                spaceBetween={0}
                                slidesPerView={4}
                                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>
        )
    }
    return (
        <Popup open={open} onClose={()=>{
            if (onClose)onClose();
        }}>
            <div className={styles.container}>
                <div className={styles.title_con}>
                    <img className={styles.icon} src={icon_cash}/>
                    {stringFormat(i18n.t("turnplate.pop_info.title"),[formatCash(turnplate.total_amount,0)])}
                </div>
                <div className={styles.sub_title_con}>
                    <img className={styles.icon} src={icon_coin}/>
                    {i18n.t("turnplate.pop_info.title_1")}
                </div>
                <div className={styles.tips}>
                    {i18n.t("turnplate.pop_info.tips")}
                </div>
                {renderMain()}
                {renderRecord()}
            </div>
        </Popup>
    )
}
export default WPopInfo;
