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 {
    spanRef: Ref<HTMLSpanElement> = createRef(null);
    render() {
        return html `<div class="container">
    <span ${ref(this.spanRef)}>Position</span>
    <div
        class="preview"
        style="position: relative;width: 800px;height: 800px;transform: scale(0.67123);transform-origin: top left;background: #eee;"
    >
        <div
            class="target"
            style="top: 0px;left: 0px;transform: translate(150px, 100px);"
        >Target</div>
    </div>
    <lit-moveable
        .target=${".target"}
        .litDraggable=${true}
        .snappable=${true}
        snapContainer=".preview"
        .bounds=${{ left: 0, top: 0
        }}
        @litDrag=${this.onDrag}
    ></lit-moveable>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
        this.spanRef.value!.innerHTML = `${e.translate[0]} x ${e.translate[1]}`;
    }
}