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";
    keepRatio: any = "$preview_keepRatio";
    throttleScale: any = "$preview_throttleScale";
    renderDirections: any = "$preview_renderDirections";
    rotatable: any = "$preview_rotatable";
    throttleRotate: any = "$preview_throttleRotate";
    rotationPosition: any = "$preview_rotationPosition";
    originDraggable: any = "$preview_originDraggable";
    originRelative: any = "$preview_originRelative";
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="root">
    <div class="container">
        <div
            class="target"
            ${ref(this.targetRef)}
            style="transform: translate(0px, 0px) rotate(0deg) scale(1, 1);"
        >Target</div>
        <lit-moveable
            .target=${this.targetRef}
            .litDraggable=${this.draggable}
            .throttleDrag=${this.throttleDrag}
            .edgeDraggable=${this.edgeDraggable}
            .startDragRotate=${this.startDragRotate}
            .throttleDragRotate=${this.throttleDragRotate}
            .scalable=${true}
            .keepRatio=${this.keepRatio}
            .throttleScale=${this.throttleScale}
            .renderDirections=${this.renderDirections}
            .rotatable=${this.rotatable}
            .throttleRotate=${this.throttleRotate}
            .rotationPosition=${this.rotationPosition}
            .originDraggable=${this.originDraggable}
            .originRelative=${this.originRelative}
            @litDragOrigin=${this.onDragOrigin}
            @litRender=${this.onRender}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDragOrigin(e) {
        e.target.style.transformOrigin = e.transformOrigin;
    }
    onRender(e) {
        e.target.style.transform = e.transform;
    }
}