import { EggbugImg, HCenter, Main, render_and_copy } from "./common.tsx";

const Eggbug = () => (
    <HCenter>
        <EggbugImg type="smiling" />
    </HCenter>
);

function health_style(current: number, last: number, max: number) {
    const inc_width = 100 / max;
    const dhealth = last - current;
    console.log(inc_width, dhealth);

    return {
        transform: `translateX(${-(inc_width * dhealth)}%)`,
        width: `${last * inc_width}%`,
    };
}

// could be generalized
// might be worthwhile later since <progress> is BAN
const Health = ({
    current,
    last,
    max,
}: {
    current: number;
    last: number;
    max: number;
}) => (
    console.log({ current, last, max }),
    (
        <div class="health">
            <div class="health-bar">
                <div
                    class="health-full"
                    style={health_style(current, last, max)}
                ></div>
            </div>
            <HCenter /*class="health-numeric"*/>
                <span class="health-current">
                    {Math.floor(current).toString()}
                </span>
                /<span class="health-max">{max.toString()}</span>
            </HCenter>
        </div>
    )
);
// one-time animations of hit numbers of health flying off the screen

const BattleFrame = ({
    health,
    last_health,
    max_health,
}: {
    health: number;
    last_health: number;
    max_health: number;
}) => (
    <div class="battle-frame">
        <Eggbug />
        <Health current={health} last={last_health} max={max_health} />
    </div>
);

const Defeated = ({
    last_health,
    max_health,
}: {
    last_health: number;
    max_health: number;
}) => (
    <div class="defeated">
        <Eggbug />
        <Health current={0} last={0} max={max_health} />
        eggbug is physically unharmed, emotionally destroyed <br />
        ... <br />
        ok eggbug is fine now <br />
        "re bug" to "killbug" <br />
        submit runs to{" "}
        <a href="https://cohost.org/rc/tagged/KILLing%20eggbug%20rapidly">
            #KILLing eggbug rapidly
        </a>
    </div>
);

const DamageNumber = ({ n }: { n: number }) => (
    <div
        class="damage-number"
        // changing this to use this much nicer styles thing helped me notice the bug awesome
        // i still should really, really switch to react
        // or preact!
        // anything with *actual typing*
        style={{
            top: `calc(${100 * Math.random()}px + 15%)`,
            left: `calc(${100 * Math.random()}px + 25%)`,
            // tried some exponential stuff but it was too unwieldy
            // i think this still accomplishes that punch
            fontSize: `calc(${n / 200} * 2rem + 0.5rem)`,
        }}
    >
        <div class="sway">{Math.round(n).toString()}</div>
    </div>
);

const Battle = ({
    max_health = 100,
    health = max_health,
    last_health = health,
    damage_multiplier = 10,
    damage_bonus = 1,
}: // ...rest
Partial<{
    max_health: number;
    health: number;
    last_health: number;
    damage_multiplier: number;
    damage_bonus: number;
}>) =>
    health > 0 ? (
        <details class="battle" /*{...rest}*/>
            <summary>
                <BattleFrame
                    health={health}
                    last_health={last_health}
                    max_health={max_health}
                />
                {health < last_health && (
                    <DamageNumber n={last_health - health} />
                )}
            </summary>
            <Battle
                health={
                    health - (damage_multiplier * Math.random() + damage_bonus)
                }
                last_health={health}
                max_health={max_health}
                damage_multiplier={damage_multiplier}
                damage_bonus={damage_bonus}
            />
        </details>
    ) : (
        <Defeated last_health={last_health} max_health={max_health} />
    );

// a timer would be flippin rad
// (it would look like an actual scrolling clock thingie)
// (because it would have to)
render_and_copy(
    <Main>
        <Battle max_health={10_000} damage_multiplier={200} damage_bonus={10} />
        {/* <Timer /> */}
    </Main>
);