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

@customElement("lit-app")
export default class App extends LitElement {
    @state()
    translate: any = [0, 0];
    targetRef: Ref<HTMLDivElement> = createRef(null);
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div class="root">
    <div
        class="container"
        style="display: flex;"
    >
        <div
            class="target"
            ${ref(this.targetRef)}
            style="position: relative;width: 200px;height: 100px;"
        >Target</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${this.targetRef}
            .resizable=${true}
            .keepRatio=${true}
            .throttleResize=${1}
            @litResize=${this.onResize}
            @litResizeEnd=${this.onResizeEnd}
        ></lit-moveable>
    </div>
</div>`;
    }
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onResizeEnd(e) {
        const lastEvent = e.lastEvent;
        if (lastEvent) {
            console.log(lastEvent.drag.transform);
        }
    }
}