import { randomFloatBetween } from "../../../../core/math/random/randomFloatBetween.js";
import { seededRandom } from "../../../../core/math/random/seededRandom.js";
import { CSS_ABSOLUTE_POSITIONING } from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
import { AnimationCurve } from "../AnimationCurve.js";
import { Keyframe } from "../Keyframe.js";
import { AnimationCurveView } from "./AnimationCurveView.js";

let px = 0;
let py = 0;

function addCurve(curve) {


    const view = new AnimationCurveView();
    view.curve = curve;

    view.css(CSS_ABSOLUTE_POSITIONING);

    view.size.set(460, 288);

    if (px + view.size.x > window.innerWidth) {
        px = 0;
        py += view.size.y;
    }

    view.position.set(px, py);

    px += view.size.x;


    document.body.appendChild(view.el);

    view.css({
        border: "1px solid rgba(255,255,255,0.2)"
    });

    view.link();

}

document.body.style.background = "black";
document.body.style.overflow = "hidden";
document.body.style.margin = "0";

addCurve(AnimationCurve.constant());
addCurve(AnimationCurve.easeInOut(0,0,1000));
addCurve(AnimationCurve.linear());
addCurve(AnimationCurve.from([
    Keyframe.from(0, 0),
    Keyframe.from(1, 1),
    Keyframe.from(2, 0.5)
]));


addCurve(AnimationCurve.from([
    Keyframe.from(-5, 7),
    Keyframe.from(-2, -11)
]));
addCurve(AnimationCurve.from([
    Keyframe.from(-1, 1),
    Keyframe.from(1, -1)
]));


addCurve(AnimationCurve.from([
    Keyframe.from(-5, 0),
    Keyframe.from(1, 200)
]));

const random = seededRandom();

const array = new Array(8).fill('');
const keys = array.map(()=> Keyframe.from(
    randomFloatBetween(random,-100,100),
    randomFloatBetween(random,-100,100),
));

const curve = AnimationCurve.from(keys);

for (let i = 0; i < keys.length; i++) {

    curve.alignTangents(i);
}
curve.alignAllTangents();

addCurve(curve)