import { srgb } from "@thi.ng/color";
import type { Color, css } from "@thi.ng/color";
import { randMinMax2 } from "@thi.ng/vectors";
import type { Vec } from "@thi.ng/vectors";
import { repeatedly } from "@thi.ng/transducers";
import { draw } from "@thi.ng/hiccup-canvas";
import type { IToHiccup } from "@thi.ng/api";

const NUM_CELLS = 10;
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

interface Cell extends IToHiccup {
	pos: Vec;
	r: number;
	color: Color;
}

class Cell implements Cell {
	color: Color;

	constructor(public pos: Vec, public r: number) {
		this.color = srgb.random();
	}

	toHiccup() {
		return ["circle", { fill: this.color }, this.pos, this.r];
	}
}

const cells = [
	...repeatedly(
		() =>
			new Cell(
				randMinMax2([], [0, 0], [WIDTH, HEIGHT]),
				Math.round(Math.random() * 10)
			),
		NUM_CELLS
	),
];

const canvas = document.createElement("canvas") as HTMLCanvasElement;
document.body.appendChild(canvas);
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

draw(ctx, ["g", {}, ...cells]);