import { debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";

const Spinny: Component = ({ depth }) => (
    <div class="main">
        <Square depth={depth} num_squares={depth} />
    </div>
);

function color(depth: number, num_squares: number): string {
    return (
        [
            // roygbv
            "#FF6961",
            "#FFB347",
            "#FFFF99",
            "#77DD77",
            "#ADD8E6",
            "#B19CD9",

            //t
            "#5DCDFA",
            "#F1A5B7",
            "white",
            "#F1A5B7",
            "#5DCDFA",
            // p
            "#FE218A",
            "#FCD800",
            "#20B0FE",
            // "#FFB6C1",
            // "#98E6E6",
            // "#FFDAB9",
            // "#E6E6FA",
            // "#98FF98",
            // "#FF7F50",
            // "#C8A2C8",
            // "#FFA07A",
            // "#87CEEB",
            // "#FFCCCC",
        ][num_squares - depth] ?? "none"
    );
}

//TODO: MAYBE: try to get a backup pulse animation for preferes-reduced motion
// low priority because it already turns off the animation thankfully
// ${depth % 2 == 0 ? "cw" : "ccw"}
const Square: Component = ({ depth, num_squares }) =>
    depth == 0 ? (
        <></>
    ) : (
        <div
            class={`spin`}
            style={`background-color: ${color(depth, num_squares)};`}
        >
            <Square depth={depth - 1} num_squares={num_squares} />
        </div>
    );

debug_render(<Spinny depth={14} />);