import { render_and_copy } from "./common.tsx";

const Drop = ({
    color = "red",
    i,
    duration_s,
}: {
    color?: string;
    i: number;
    duration_s: number;
}) => (
    <div
        style={{
            backgroundColor: color,
            animation: `${(Math.random() + 1).toFixed(2)}s linear ${(
                -Math.random() * 10
            ).toFixed(2)}s spin alternate-reverse infinite`,
            gridRow: "1",
            gridColumn: `${i}`,
            width: "0.1rem",
            height: "0.1rem",
            marginTop: "-1rem",
            transform: "translateY(20rem)",
        }}
        class="drop"
    ></div>
);

const Water = ({
    color = "red",
    duration_s,
}: {
    color?: string;
    duration_s: number;
}) => (
    <div
        style={{
            backgroundColor: color,
            gridRow: "1 / 2",
            gridColumn: "1 / 100000",
            transform: "translateY(100%)",
            animation: `${duration_s}s linear 0s alternate infinite spin`,
        }}
    ></div>
);

const Rain = ({
    duration_s,
    color = "red",
    drops = 100,
}: {
    duration_s: number;
    color?: string;
    drops?: number;
}) => (
    <div
        style={{
            width: "25%",
            aspectRatio: "1",
            margin: "auto",
            outline: "1px solid red",
            display: "grid",
            overflow: "clip",
        }}
    >
        {...Array.from({ length: drops }, (_, i) => (
            <Drop i={i} duration_s={duration_s} color={color} />
        ))}
        <Water color={color} duration_s={duration_s} />
    </div>
);

render_and_copy(<Rain duration_s={5} />);
