import Moveable from "lit-moveable";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ref, createRef } from "lit/directives/ref.js";

@customElement("lit-app")
export default class App extends LitElement {
    containerScale: any = "$preview_containerScale";
    targetRef: Ref<SVGPathElement> = createRef(null);
    render() {
        return html `<div class="root">
    <div
        class="container"
        .style=${`transform-origin: 0 0;transform: ${`scale(${this.containerScale})`};`}
    >
        <svg
            viewBox="0 0 200 200"
            style="border: 1px solid black;width: 200px;height: 200px;"
        >
            <path
                d="M 0 0 L 200 0 L 200 200 z"
                ${ref(this.targetRef)}
                style="fill: white;stroke: red;stroke-width: 2;"
            ></path>
        </svg>
        <lit-moveable
            .target=${this.targetRef}
            .litDraggable=${true}
            .rotatable=${true}
            .scalable=${true}
            @litRender=${this.onRender}
        ></lit-moveable>
    </div>
</div>`;
    }
    onRender(e) {
        e.target.style.cssText += e.cssText;
    }
}