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 {
    draggable: any = "$preview_draggable";
    throttleDrag: any = "$preview_throttleDrag";
    edgeDraggable: any = "$preview_edgeDraggable";
    startDragRotate: any = "$preview_startDragRotate";
    throttleDragRotate: any = "$preview_throttleDragRotate";
    resizable: any = "$preview_resizable";
    keepRatio: any = "$preview_keepRatio";
    snappable: any = "$preview_snappable";
    bounds: any = "$preview_bounds";
    edge: any = "$preview_edge";
    targetRef: Ref<HTMLDivElement> = createRef(null);
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div class="root">
    <div
        class="container"
        style="width: 500px;height: 500px;border: 1px solid #ccc;"
    >
        <div
            class="target"
            ${ref(this.targetRef)}
        >Target</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${this.targetRef}
            .litDraggable=${this.draggable}
            .throttleDrag=${this.throttleDrag}
            .edgeDraggable=${this.edgeDraggable}
            .startDragRotate=${this.startDragRotate}
            .throttleDragRotate=${this.throttleDragRotate}
            .resizable=${this.resizable}
            .keepRatio=${this.keepRatio}
            .snappable=${this.snappable}
            .bounds=${this.bounds}
            .edge=${this.edge}
            @litDrag=${this.onDrag}
            @litResize=${this.onResize}
            @litBound=${this.onBound}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onResize(e) {
        e.target.style.width = `${e.width}px`;
        e.target.style.height = `${e.height}px`;
        e.target.style.transform = e.drag.transform;
    }
    onBound(e) {
        console.log(e);
    }
}