import { useState } from "react";
import { createPortal } from "react-dom";
import { ShrimpRain } from "./shrimp-rain";

export default function SeafoodButton() {
    const [showShrimpOverlay, setShowShrimpOverlay] = useState(false);

    // set maxShrimp based on image size so not to overflow
    const maxShrimp = 83;
    const shrimpRainValues: number[] = [];
    for (let i = 0; i < maxShrimp; i++) {
        shrimpRainValues.push(Math.floor(Math.random() * 200));
    }

    function itsRainingShrimp() {
        setShowShrimpOverlay(true);
        // wait until after the animation plays to make the shrimp disappear 🪄
        setTimeout(() => {
            setShowShrimpOverlay(false);
        }, 2900);
    }

    return (
        <>
            <button
                className="cursor-[unset] bg-space-shrimp-blue text-tangerine-dream-shrimp p-[20px] mt-[10px] w-full rounded-xl border-transparent border-2 hover:border-ashy-shrimp shadow-lg/40"
                type="button"
                onClick={() => itsRainingShrimp()}
            >
                Dive into Seafood Delights
            </button>
            {showShrimpOverlay &&
                createPortal(
                    <ShrimpRain randomValues={shrimpRainValues} />,
                    document.body
                )}
        </>
    );
}

//todo nice to have: cooler button hover state - dancing shrimps