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 {
    maxWidth: any = "$preview_maxWidth";
    maxHeight: any = "$preview_maxHeight";
    minWidth: any = "$preview_minWidth";
    minHeight: any = "$preview_minHeight";
    resizable: any = "$preview_resizable";
    keepRatio: any = "$preview_keepRatio";
    throttleResize: any = "$preview_throttleResize";
    renderDirections: any = "$preview_renderDirections";
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="root">
    <div class="container">
        <div
            class="target"
            ${ref(this.targetRef)}
            .style=${`max-width: ${this.maxWidth};max-height: ${this.maxHeight};min-width: ${this.minWidth};min-height: ${this.minHeight};`}
        >Target</div>
        <lit-moveable
            .target=${this.targetRef}
            .resizable=${this.resizable}
            .keepRatio=${this.keepRatio}
            .throttleResize=${this.throttleResize}
            .renderDirections=${this.renderDirections}
            @litResize=${this.onResize}
        ></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;
    }
}