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

const Digit = ({
    length_per_s,
    digits,
}: {
    length_per_s: number;
    digits: (number | string)[];
}) => (
    <div
        style={{
            display: "inline-block",
            fontVariant: "tabular-nums",
            overflow: "hidden",
            height: "1rem",
        }}
    >
        <div
            style={{
                transform: "translateY(-100%)",
                animation: `spin ${
                    (length_per_s * digits.length) / 60
                }s 0s reverse infinite alternate steps(${digits.length}, end)`,
                position: "relative",
            }}
        >
            {...digits.map(d => (
                <div
                    style={{
                        height: "1rem",
                        transform: "translateY(75%)",
                        textAlign: "right",
                    }}
                >
                    {d}
                </div>
            ))}
        </div>
    </div>
);

// silly
const make_digits = ({
    up,
    cycle_up,
    cycle_down,
}: {
    up: number[];
    cycle_up: number;
    cycle_down: number;
}) => [
    ...new Array(cycle_up).flatMap(() => up),
    ...new Array(cycle_down).flatMap((_, i) =>
        i == 0 ? up.toReversed().slice(1) : up.toReversed()
    ),
];
console.log(
    make_digits({
        up: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        cycle_up: 6,
        cycle_down: 10,
    })
);

render_and_copy(
    <span>
        <Digit
            length_per_s={60}
            digits={new Array(20).fill(undefined).map((_, i) =>
                (i < 10 ? 10 - i : -(i - 10))
                    .toString()
                    .replace(/-([0-9])$/, "-0$1")
                    .replace(/^([0-9])$/, "0$1")
            )}
        />
        :
        <Digit
            length_per_s={1}
            digits={new Array(60 * 20)
                .fill(undefined)
                .map((_, i) =>
                    (i < 30 * 60 ? 59 - (i % 60) : i % 60)
                        .toString()
                        .padStart(2, "0")
                )}
        />
    </span>
);