import { ComponentChildren } from "preact";
import { css, render_and_copy } from "./common.tsx";
// combine a shake with a fall
// fall should be more delayed than shake
// we want outliers (a few letters falling before than others)
// exponentials should do

const default_shaky_delay = (x: number) => 5 + 10 * x;
export type DelayFn = (_: number) => number;

// exporting these in case they turn out to be useful
export const Shaky = ({
    children,
    delay_fn = default_shaky_delay,
}: {
    children: ComponentChildren;
    delay_fn?: DelayFn;
}) => (
    <div
        style={{
            transform: css.transform(
                css.translate(css.rem(-0.1), css.rem(-0.1))
            ),
            animation: `0.2s spin alternate-reverse linear ${delay_fn(
                Math.random()
            )}s infinite`,
            display: css.inline_block,
        }}
    >
        {children}
    </div>
);

const default_fall_delay = (x: number) => (3 * x) ** 4;
export const Fall = ({
    children,
    delay_fn = default_fall_delay,
}: {
    children: ComponentChildren;
    delay_fn?: DelayFn;
}) => (
    <div
        style={{
            display: css.inline_block,
        }}
    >
        {children}
    </div>
);

const msg = `
i haven't seen this on other blogs, but some of the posts on mine seem to be kinda unstable?
if that makes sense?
like, sometimes i see them shake, and i swear i saw some letters fall

i know i'm a (convicted?) css criminal, so i'm thinking that this might just be the w3 gods punishing me.

so. yeah. if you see anything like that on any of my posts let me know
`.trim();

// should probably do it word wise so they don't break
export const Crumble = ({
    msg,
    shaky_delay_fn,
    fall_delay_fn,
}: {
    msg: string;
    shaky_delay_fn?: DelayFn;
    fall_delay_fn?: DelayFn;
}) => (
    <div>
        {msg.split("").map(c =>
            /[^\s]/.test(c) ? (
                <Fall delay_fn={fall_delay_fn}>
                    <Shaky delay_fn={shaky_delay_fn}>{c}</Shaky>
                </Fall>
            ) : c == "\n" ? (
                <br />
            ) : (
                c
            )
        )}
    </div>
);

render_and_copy(<Crumble msg={msg} />);