import styles from './styles.module.scss';
import img_money from "@assets/moneyrain/money.png";
import {useEffect, useRef, useState} from "react";
const eleWH=[
    {
        width: 77,
        height: 48
    }, {
        width: 77,
        height: 47
    }, {
        width: 77,
        height: 45
    }, {
        width: 77,
        height: 46
    }, {
        width: 101,
        height: 45
    }
]
const WRainAni=()=>{
    const moneyRain=useRef(null);
    const testRain=(t, e)=>{
        return Math.random() * (e - t) + t;
    }
    const createMoneySymbol=(t)=>{
        if (moneyRain&&moneyRain.isShow){
            let i = Math.ceil(4 * Math.random());
            let a = document.createElement("div");
            a.classList.add(styles["money"+i]);
            let s = eleWH[i - 1];
            let n = Math.random() * window.innerWidth;
            let o = 30 * testRain(.7, 1) - 100;
            if (t)o = 800 * testRain(0, 1);
            a.style.left = "".concat(n, "px");
            a.style.top = "".concat(o, "px");
            a.style.transform = "rotate(".concat(360 * Math.random(), "deg)");
            let r = testRain(.4, 1);
            a.style.width = "".concat(r * s.width, "px");
            a.style.height = "".concat(r * s.height, "px");
            a.style["animation-name"] = t ? styles["fallAndSpin3D".concat(Math.ceil(3 * Math.random()))] : styles["fallAndSpin".concat(Math.ceil(3 * Math.random()))];
            a.style["background-size"] = "".concat(r * s.width, "px ").concat(r * s.height, "px");
            let c = 5 * Math.random() + 5;
            if (t){c = 2 * Math.random() + 3;}
            a.style.animationDuration = "".concat(c, "s, ").concat(c / 2, "s");
            if (moneyRain&&moneyRain.current){
                moneyRain.current.appendChild(a);
                a.addEventListener("animationend", function() {
                    a.remove();
                    createMoneySymbol();
                })
            }
        }
    }
    const showMoneyRain=(t)=>{
        clearMoneyRain();
        if (t){
            moneyRain.isShow=true;
            var e = Math.ceil(window.innerWidth / 4);
            for (let i = 0; i < e; i++) {
                let timer=setTimeout(function() {
                    createMoneySymbol(true)
                    createMoneySymbol()
                }, 20 * i * Math.random());
                moneyRain.timerList.push(timer);
            }
        }
        else moneyRain.isShow=false;
    }
    const initMoneyRain=()=>{
        if (moneyRain!=null){
            moneyRain.timerList=[];
            showMoneyRain(true);
        }
    }
    const clearMoneyRain=()=>{
        if (moneyRain){
            let timerList=moneyRain.timerList;
            for (let i = 0; i < timerList.length; i++) {
                let timer=timerList[i];
                clearTimeout(timer);
            }
            moneyRain.timerList=[];
        }
    }
    useEffect(()=>{
        initMoneyRain();
        return ()=>{
            clearMoneyRain();
        }
    },[])
    return (
        <div ref={moneyRain} className={styles.rain_con}>
        </div>
    )
}
export default WRainAni;