import React, { useEffect, useRef, useState } from "react";
import { Box, Typography } from "@mui/material";
import styles from './styles.module.scss';
import LazyImage from "@components/LazyImage";
import unlockImg from "@assets/game/withdraw_box.webp"
import barImg from "@assets/game/withdraw_box_bar.png";
import lightImg from "@assets/light_effect.png";
import doneImg from "@assets/game/withdraw_done.webp";
import walletImg from "@assets/icon_wallet.png"
import { numFormatter } from "@utils/helpers";
import Draggable from 'react-draggable';
import DraggableNode from "@components/DraggableNode";

const UnlockWithdrawBox = ({ onClick, current = 21.69, total = 40, landscape = false }) => {
    const total_progress = current / total;
    const [progress, setProgress] = useState(0);
    const currentRef = useRef(0);
    const animationRef = useRef(null);
    useEffect(() => {
        cancelAnimationFrame(animationRef.current);

        const animate = () => {
            const current = currentRef.current;
            const next = current + (total_progress - current) * 0.1;
            currentRef.current = next;

            setProgress(next);

            if (Math.abs(total_progress - next) > 0.001) {
                animationRef.current = requestAnimationFrame(animate);
            } else {
                currentRef.current = total_progress;
                setProgress(total_progress);
            }
        };

        animationRef.current = requestAnimationFrame(animate);

        return () => cancelAnimationFrame(animationRef.current);
    }, [total_progress])
    // useEffect(() => {
    //     const timer = setInterval(() => {
    //         setProgress((prev) => {
    //             if (prev >= total_progress) {
    //                 clearInterval(timer);
    //                 return prev;
    //             }
    //             return Math.min(total_progress, prev + 0.01);
    //         });
    //     }, 10)
    //     return () => {
    //         clearInterval(timer);
    //     }
    // }, [])

    const renderUnlocked = () => {
        return (
            <div className={styles.unlock_box} onClick={onClick}>
                <LazyImage src={unlockImg} alt={""} />
                <div className={styles.bar_box}>
                    <div
                        className={styles.radial_fill}
                        style={{
                            backgroundImage: `url(${barImg})`, // ✅ 你的原图路径
                            WebkitMaskImage: `conic-gradient(white ${progress * 360}deg, transparent 0deg)`,
                            maskImage: `conic-gradient(white ${progress * 360}deg, transparent 0deg)`,
                        }}
                    ></div>
                </div>


                <div className={styles.amount_box}>
                    <span>${numFormatter(current)}/</span>
                    <br />
                    ${numFormatter(total)}
                </div>
            </div>
        )
    }

    const renderActivated = () => {
        return (
            <div className={styles.done_box} onClick={onClick}>
                <img className={styles.light_img} src={lightImg} alt="" />
                <img src={doneImg} alt={""} />
                <div className={styles.wallet_box}>
                    <img className={styles.wallet_img} src={walletImg} />
                    <div className={styles.amount_box}>
                        <span>WITHDRAW</span>
                        <br />
                        Tap Here
                    </div>
                </div>

            </div>
        )
    }

    return (
        <div className={styles.full_box}>
            <DraggableNode onClick={onClick} className={`${landscape ? styles.dragbox_rt : styles.dragbox_lt}`}>
                <div style={{ transform: `rotate(${landscape ? 90 : 0}deg)` }}>
                    {
                        total_progress >= 1 ? renderActivated() : renderUnlocked()
                    }
                </div>
            </DraggableNode>
        </div>

    );
}

export default UnlockWithdrawBox;