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 {
    resizable: any = "$preview_resizable";
    keepRatio: any = "$preview_keepRatio";
    throttleResize: any = "$preview_throttleResize";
    renderDirections: any = "$preview_renderDirections";
    widthInputRef: Ref<HTMLInputElement> = createRef(null);
    heightInputRef: Ref<HTMLInputElement> = createRef(null);
    moveableRef: Ref<Moveable> = createRef(null);
    onInput: any = (e: any) => {
        const ev = (e.nativeEvent || e) as InputEvent;
        if (typeof ev.data === "undefined") {
            this.moveableRef.value!.request("resizable", {
                offsetWidth: parseFloat(this.widthInputRef.value!.value),
                offsetHeight: parseFloat(this.heightInputRef.value!.value)
            }, true);
        }
    };
    onKeyUp: any = (e: any) => {
        e.stopPropagation();
        if (e.keyCode === 13) {
            this.moveableRef.value!.request("resizable", {
                offsetWidth: parseFloat(this.widthInputRef.value!.value),
                offsetHeight: parseFloat(this.heightInputRef.value!.value)
            }, true);
        }
    };
    render() {
        return html `<div class="root">
    <div>
        width:
        <input
            ${ref(this.widthInputRef)}
            type="number"
            defaultValue="280"
            @input=${this.onInput}
            @keyUp=${this.onKeyUp}
            data-horizontal="true"
        ></input>
        &nbsp;
                    height:
        <input
            ${ref(this.heightInputRef)}
            type="number"
            defaultValue="230"
            @input=${this.onInput}
            @keyUp=${this.onKeyUp}
            data-horizontal="false"
        ></input>
    </div>
    <div class="container">
        <div class="target">Target1</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${".target"}
            .resizable=${this.resizable}
            .keepRatio=${this.keepRatio}
            .throttleResize=${this.throttleResize}
            .renderDirections=${this.renderDirections}
            @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) {
        requestAnimationFrame(() => {
            const rect = e.moveable.getRect();
            this.widthInputRef.value!.value = `${rect.offsetWidth}`;
            this.heightInputRef.value!.value = `${rect.offsetHeight}`;
        });
    }
}