// CSS Paint Worklet entry for redoal.com's hero: `background:
// paint(redoal-paths)` on the hero box, animated by the page changing
// --redoal-t (a registered <number> custom property driven by a CSS
// animation - every change repaints). Colors arrive as computed input
// properties, so the worklet follows the theme without a palette copy.
import { makePaths, drawPaths } from './paths.js';

registerPaint(
    'redoal-paths',
    class {
        static get inputProperties() {
            return ['--redoal-t', '--redoal-seed', '--redoal-count', '--accent', '--ink-dim'];
        }
        paint(ctx, size, props) {
            const num = (name, fallback) => {
                const v = parseFloat(props.get(name).toString());
                return Number.isFinite(v) ? v : fallback;
            };
            const seed = num('--redoal-seed', 7);
            const count = num('--redoal-count', 47);
            const t = num('--redoal-t', 0);
            if (!this.paths || this.seed !== seed || this.count !== count) {
                this.paths = makePaths(seed, count);
                this.seed = seed;
                this.count = count;
            }
            const accent = props.get('--accent').toString().trim() || '#47807e';
            const dim = props.get('--ink-dim').toString().trim() || '#6d6c66';
            drawPaths(ctx, size.width, size.height, this.paths, t % 1, [accent, dim]);
        }
    },
);