import tossable from ".";
import { styler } from "popmotion";

const renderDiv = document.createElement("div");

export const render = (html: string) => {
    renderDiv.innerHTML = html;
    return renderDiv.firstElementChild as HTMLElement;
}

const area = document.createElement("div");
Object.assign(area.style, {
    width: "300px",
    height: "500px",
    background: "blue",
    position: "absolute"
});
document.body.appendChild(area);

const div = document.createElement("div");
Object.assign(div.style, {
    width: "100px",
    height: "100px",
    background: "red",
    position: "absolute"
});
document.body.appendChild(div);

const divStyler = styler(div);

tossable({
    touchTarget: area,
    speed: 0.2,
    step: val => divStyler.set("x", val),
    onComplete: () => console.log("done")
});

document.body.appendChild(render(
    `<div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
        <div style="margin: 100px">hello world</div>
    </div>
    `
));