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 {
    containerScale: any = "$preview_containerScale";
    throttleDrag: any = "$preview_throttleDrag";
    edgeDraggable: any = "$preview_edgeDraggable";
    startDragRotate: any = "$preview_startDragRotate";
    throttleDragRotate: any = "$preview_throttleDragRotate";
    xInputRef: Ref<HTMLInputElement> = createRef(null);
    yInputRef: Ref<HTMLInputElement> = createRef(null);
    moveableRef: Ref<Moveable> = createRef(null);
    @state()
    requestCallbacks: any = (() => {
        function request() {
            this.moveableRef.value!.request("draggable", {
                x: parseInt(this.xInputRef.value!.value),
                y: parseInt(this.yInputRef.value!.value)
            }, true);
        }
        return {
            onInput(e: any) {
                const ev = (e.nativeEvent || e) as InputEvent;
                if (typeof ev.data === "undefined") {
                    request();
                }
            },
            onKeyUp(e: any) {
                e.stopPropagation();
                if (e.keyCode === 13) {
                    request();
                }
            }
        };
    })();
    render() {
        return html `<div class="root">
    <div>
        X:
        <input
            ${ref(this.xInputRef)}
            type="number"
            defaultValue="100"
            {...this.requestCallbacks}
        ></input>
        &nbsp;
                        Y:
        <input
            ${ref(this.yInputRef)}
            type="number"
            defaultValue="150"
            {...this.requestCallbacks}
        ></input>
    </div>
    <div
        class="container"
        .style=${`transform: ${`scale(${this.containerScale})`};`}
    >
        <div class="target">Target</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${".target"}
            .litDraggable=${true}
            .throttleDrag=${this.throttleDrag}
            .edgeDraggable=${this.edgeDraggable}
            .startDragRotate=${this.startDragRotate}
            .throttleDragRotate=${this.throttleDragRotate}
            @litDrag=${this.onDrag}
            @litDragEnd=${this.onDragEnd}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onDragEnd(e) {
        requestAnimationFrame(() => {
            const rect = e.moveable.getRect();
            this.xInputRef.value!.value = `${rect.left}`;
            this.yInputRef.value!.value = `${rect.top}`;
        });
    }
}