site_8g/src/components/ModalPopup/RedPacketModal/index.tsx

"use client";

import { receiveRedPacketApi } from "@/api/promo";
import { useRouter } from "@/i18n/routing";
import { getToken } from "@/utils/Cookies";
import { Mask, Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
const randomX = (len: number) => {
    return Math.floor(Math.random() * len);
};
const mockData = Array(500)
    .fill(0)
    .map((item) => {
        return {
            phone: `55****${(randomX(99) + "").padEnd(2, "0")}`,
            num: `${(Math.random() * 20).toFixed(2)}`,
            time: "11:00",
        };
    });
function getRandom(min: number, max: number) {
    const floatRandom = Math.random();

    const difference = max - min;

    // 介于 0 和差值之间的随机数
    const random = Math.round(difference * floatRandom);

    return random + min;
}
/**
 * @description 描述
 */
type DescProps = {
    onClose: () => void;
};

export interface RedPacketTypes {
    countdown: number;
    /**
     * 活动结束时间戳
     */
    end_time: number;

    /**
     * 活动详情图片
     */
    icon: string;
    /**
     * 活动ID
     */
    id: number;
    /**
     * 红包索引
     */
    index: number;
    /**
     * 是否能领取
     */
    can_receive: boolean;
    /**
     * 是否领取
     */
    is_receive: boolean;
    /**
     *  是否开始
     */
    is_start: boolean;
    /**
     * 红包详情
     */
    rewards: Reward[];
    /**
     * 活动开始时间戳
     */
    start_time: number;
    /**
     * 显示时间
     */
    time_string: string;
    times: string[];
}

export interface Reward {
    /**
     * 红包等级
     */
    level: number;
    max_amount: number;
    max_vip: number;
    min_amount: number;
    min_vip: number;
    multiple: number;
    /**
     * 红包名称
     */
    name: string;
    total: number;
}

interface PacketDetailsProps {
    packet: RedPacketTypes;
    iconImg: string;
    onCloseHby: () => void;
    onReciveRed: () => void;
    redAmount: number;
}
/// 红包详情
const PacketEndDetail: FC<Omit<PacketDetailsProps, "onReciveRed" | "redAmount">> = (props) => {
    const { iconImg, onCloseHby, packet } = props;
    const router = useRouter();
    const token = getToken();
    const handler = () => {
        if (!token) {
            router.push("/login");
        }
        onCloseHby();
    };
    const str = packet.time_string.split("");
    return (
        <div className={`absolute h-[100%] w-[100%]`} onClick={handler}>
            <div className={"flex h-[100%] w-[100%] items-center"}>
                <div className={"relative h-[6.2rem] w-[100%]"}>
                    <img className={"h-[6.2rem] w-[100%]"} src={iconImg} alt="" />
                    {/* 下一场开始时间*/}
                    <div className={"absolute top-[27%] w-[100%]"}>
                        <div className={"relative h-[0.4306rem] border-primary-color"}>
                            <div className="absolute left-[21%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
                                {str[0]}
                            </div>
                            <div className="absolute left-[36%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
                                {str[1]}
                            </div>
                            <div className="absolute left-[47%] h-[100%] w-[0.2167rem] text-center text-[0.2778rem] font-black text-[red]">
                                {str[2]}
                            </div>
                            <div className="absolute left-[54%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
                                {str[3]}
                            </div>
                            <div className="absolute left-[68%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
                                {str[4]}
                            </div>
                        </div>
                    </div>

                    <div
                        className={
                            "absolute top-[53%] h-[0.6944rem] w-[100%] px-[0.6944rem]" +
                            " grid grid-cols-3 overflow-scroll border-primary-color" +
                            " text-[18px] text-[red]"
                        }
                    >
                        {packet.times.map((time, parentIndex) => {
                            return (
                                <div key={parentIndex} className={""}>
                                    {time}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </div>
    );
};

const PacketStartDetail: FC<Omit<PacketDetailsProps, "redAmount">> = (props) => {
    const { iconImg, onCloseHby, onReciveRed, packet } = props;
    const maxCount = packet.rewards
        .reduce((p, n) => (p > n.max_amount ? p : n.max_amount), 0)
        .toFixed(2);
    return (
        <div className={`absolute h-[100%] w-[100%]`} onClick={onCloseHby}>
            <div className={"flex h-[100%] w-[100%]"}>
                <div className={"relative h-[6.25rem] w-[100%] md:mt-[30px]"}>
                    <img src="/redpacket/isStartBg.png" alt="" className={"h-[6.25rem] w-[100%]"} />

                    <div
                        className={
                            "absolute top-[70%] h-[0.6944rem] w-[100%] px-[0.7rem]" +
                            " text-center text-[0.16rem] font-bold text-[#019632]" +
                            " [text-shadow:1px_1px_#fff]"
                        }
                    >
                        <p>Valor máximo de queda em</p>
                        <p>
                            dinheiro: <span className={"text-primary-color"}>R${maxCount}</span>
                        </p>
                    </div>
                    <div
                        className={
                            "absolute bottom-[10%] left-[50%] h-[65px] w-[250px] " +
                            " -translate-x-1/2"
                        }
                        onClick={(e) => {
                            e.stopPropagation();
                            onReciveRed();
                        }}
                    ></div>
                </div>
            </div>
        </div>
    );
};

const PacketReceiveDetail: FC<Omit<PacketDetailsProps, "onReciveRed" | "packet">> = (props) => {
    const { iconImg, onCloseHby, redAmount } = props;

    const t = useTranslations("packetsPopup");
    return (
        <div className={`absolute h-[100%] w-[100%]`} onClick={onCloseHby}>
            <div className={"flex h-[100%] w-[100%]"}>
                <div className={"relative h-[6.25rem] w-[100%] md:mt-[30px]"}>
                    <img src={iconImg} alt="" className={"h-[6.25rem] w-[100%]"} />
                    <div
                        className={
                            "absolute top-[28%] w-[100%] text-center font-black" +
                            " text-[0.4167rem] text-[#1fa62e]"
                        }
                    >
                        <p>R$</p>
                        <p className={"-mt-[0.0694rem]"}>{redAmount.toFixed(2)}</p>
                    </div>

                    <div
                        className={
                            "absolute bottom-[15%] h-[1.1rem] px-[0.8333rem]" + " text-[#ff9000]"
                        }
                    >
                        <div className={"text-center text-[0.1667rem] font-bold"}>
                            {redAmount > 0 ? t("receiveSuccess") : t("receiveWarring")}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

/**
 * @description  动画背景 - 下雨动效
 */
type Props = {
    onAfterHandler?: () => void;
};
export type RedPacketModalProps = {
    onClose: () => void;
    onOpen: (source: any[], index?: number) => void;
};

/**
 * @description 红包的三种状态
 * is_start 可领取 展示红包领取组件
 * is_receive 已领取 展示领取详情组件
 * is_end 可展示 展示说明页
 */
enum Status {
    is_start,
    is_receive,
    is_end,
}
interface Snowflake {
    x: number; // 水平位置
    y: number; // 垂直位置
    opacity: number; // 透明度
    scale: number; // 缩放比例
    speedX: number; // 水平移动速度
    speedY: number; // 垂直下落速度
    rotate: number; // 当前旋转角度
    rotateSpeed: number; // 旋转速度
    image: HTMLImageElement; // 图片路径
}

interface SnowfallProps {
    images: string[]; // 图片数组
    snowflakeCount?: number; // 雪花数量
    onClose: () => void;
}

const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 80, onClose = () => {} }) => {
    //     canvas
    const canvasRef = useRef<HTMLCanvasElement | null>(null);
    // 预加载图片
    const imageElements = useRef<HTMLImageElement[]>([]);
    // 父元素
    const containerRef = useRef<HTMLDivElement | null>(null);

    const createSnowflakes = (count: number, width: number, height: number): Snowflake[] => {
        return Array.from({ length: count }, () => ({
            x: Math.random() * width,
            y: Math.random() * height - height,
            scale: Math.random() * (1.2 - 0.5) + 0.5,
            speedX: Math.random() * 1.5 - 0.75,
            speedY: Math.random() * 5 + 1,
            rotate: Math.random() * 180,
            rotateSpeed: Math.random() * 2 - 1,
            opacity: Math.random() * (1.2 - 0.5) + 0.5,
            image: imageElements.current[Math.floor(Math.random() * imageElements.current.length)],
        }));
    };
    useEffect(() => {
        // 预加载图片
        imageElements.current = images.map((src) => {
            const img = new Image();
            img.src = src;
            return img;
        });

        const canvas = canvasRef.current;
        if (!canvas) return;

        const ctx = canvas.getContext("2d");
        if (!ctx) return;

        const parentWidth = containerRef.current?.clientWidth || 0;
        const parentHeight = (canvas.height = containerRef.current?.clientHeight || 0);

        const width = (canvas.width = parentWidth);
        const height = (canvas.height = parentHeight);

        let snowflakes: Snowflake[] = createSnowflakes(snowflakeCount, width, height);

        const imgHeight = 80;
        const imgWidth = 80;
        const animate = () => {
            ctx.clearRect(0, 0, width, height);
            snowflakes.forEach((flake) => {
                flake.y += flake.speedY;
                flake.x += flake.speedX;
                flake.rotate += flake.rotateSpeed;

                if (flake.y > height) {
                    flake.y = -44;
                    flake.x = Math.random() * width;
                    flake.rotate = Math.random() * 360;
                }
                if (flake.x < 0 || flake.x > width) {
                    flake.speedX *= -1;
                }

                ctx.save();
                ctx.globalAlpha = flake.opacity;
                ctx.translate(
                    flake.x + (imgHeight * flake.scale) / 2,
                    flake.y + (imgWidth * flake.scale) / 2
                );
                ctx.rotate((flake.rotate * Math.PI) / 180);
                ctx.drawImage(
                    flake.image,
                    (-imgHeight * flake.scale) / 2,
                    (-imgWidth * flake.scale) / 2,
                    imgHeight * flake.scale,
                    imgWidth * flake.scale
                );
                ctx.restore();
            });

            requestAnimationFrame(animate);
        };

        animate();

        const handleResize = () => {
            canvas.width = parentWidth;
            canvas.height = parentHeight;
            snowflakes = createSnowflakes(snowflakeCount, canvas.width, canvas.height);
        };

        window.addEventListener("resize", handleResize);

        return () => {
            window.removeEventListener("resize", handleResize);
        };
    }, []);

    return (
        <div className={"absolute h-[100%] w-[100%]"} ref={containerRef} onClick={onClose}>
            <canvas ref={canvasRef} style={{ display: "block" }} />;
        </div>
    );
};
const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacketModal(props, ref) {
    const { onAfterHandler } = props;
    const [visible, setVisible] = useState(false);
    const [iconLists, setIconLists] = useState<string[]>([]);
    // 初始状态为is_end, 展示活动详情页
    const [status, setStatus] = useState<Status>(Status.is_end);
    const packetCurrent = useRef<RedPacketTypes | null>(null);
    const packets = useRef<RedPacketTypes[]>([]);

    const [redAmount, setRedAmount] = useState<number>(1);
    const activeIndex = useRef<number>(0);
    const token = getToken();
    const element = useRef<HTMLElement | null>(null);
    useImperativeHandle(ref, () => {
        return {
            onClose: () => setVisible(false),
            onOpen: (source, index?: number) => {
                packets.current = source;
                if (index !== null && index !== undefined) {
                    activeIndex.current = index;
                }

                getRedPacketInfo().then((res) => {
                    setVisible(true);
                });
            },
        };
    });

    const getRedPacketInfo = async () => {
        try {
            let actList = packets.current;
            // 是否有已开始但是没领过的红包
            let packetsFilter = actList;
            // .filter((aItem) => {
            //     return aItem.is_start && aItem.can_receive && !aItem.is_receive;
            // })
            // .sort((pre, next) => pre.end_time - next.end_time);

            // 有可领取红包 - is_start  = true -> all
            if (packetsFilter.length > 0) {
                let current = packetsFilter[activeIndex.current];
                let iconList = JSON.parse(current.icon);
                // 红包
                packetCurrent.current = current;
                // 有可领取红包
                setIconLists(iconList);
                if (!token) {
                    setStatus(Status.is_end);
                } else {
                    setStatus(
                        current.is_start && current.can_receive ? Status.is_start : Status.is_end
                    );
                }
            } else {
                // 无可领取红包
                // 展示最近可领红包详情
                // let packets = actList.sort((pre, next) => pre.end_time - next.end_time);
                // packetCurrent.current = packets[0];
                // setIconLists(JSON.parse(packets[0].icon));
                // // 无可领取红包展示详情
                // setStatus(Status.is_end);

                Toast.show("The event is not open");
            }
        } catch (error) {
            console.log("redPacketInfo===>error:", error);
        }
    };

    const onReciveRed = async () => {
        try {
            let paramsData = {
                id: packetCurrent.current?.id!,
                index: packetCurrent.current?.index!,
            };
            let receiveRedPacketInfo = await receiveRedPacketApi(paramsData);
            let redNum = receiveRedPacketInfo.data;
            if (onAfterHandler) {
                onAfterHandler();
            }
            setStatus(Status.is_receive);
            setRedAmount(redNum?.amount);
        } catch (error) {
            console.log("redPacketInfo===>error:", error);
        }
    };

    useEffect(() => {
        element.current = document.getElementById("app");
    }, []);

    const ImagesData = Array.from({ length: 6 }).map((_, index) => {
        return `/9f/money${index + 1}.png`;
    });
    return (
        <Mask visible={visible} destroyOnClose={true} getContainer={element.current} opacity={0.75}>
            <Snowfall images={ImagesData} onClose={() => setVisible(false)} />

            {status === Status.is_start ? (
                <PacketStartDetail
                    onCloseHby={() => setVisible(false)}
                    onReciveRed={onReciveRed}
                    iconImg={iconLists[1]}
                    packet={packetCurrent.current!}
                />
            ) : status === Status.is_receive ? (
                <PacketReceiveDetail
                    onCloseHby={() => setVisible(false)}
                    redAmount={redAmount}
                    iconImg={iconLists[2]}
                />
            ) : (
                <PacketEndDetail
                    onCloseHby={() => setVisible(false)}
                    iconImg={iconLists[0]}
                    packet={packetCurrent.current!}
                />
            )}
        </Mask>
    );
});

export default memo(RedPacketModal);