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";
    startDragRotate: any = "$preview_startDragRotate";
    throttleDragRotate: any = "$preview_throttleDragRotate";
    zoom: any = "$preview_zoom";
    clippable: any = "$preview_clippable";
    clipRelative: any = "$preview_clipRelative";
    clipArea: any = "$preview_clipArea";
    dragArea: any = "$preview_dragArea";
    dragWithClip: any = "$preview_dragWithClip";
    defaultClipPath: any = "$preview_defaultClipPath";
    clipTargetBounds: any = "$preview_clipTargetBounds";
    keepRatio: any = "$preview_keepRatio";
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="root">
    <div class="container">
        <div
            class="target"
            ${ref(this.targetRef)}
        >Target</div>
        <lit-moveable
            .target=${this.targetRef}
            .litDraggable=${this.draggable}
            .startDragRotate=${this.startDragRotate}
            .throttleDragRotate=${this.throttleDragRotate}
            .zoom=${this.zoom}
            .clippable=${this.clippable}
            .clipRelative=${this.clipRelative}
            .clipArea=${this.clipArea}
            .dragArea=${this.dragArea}
            .dragWithClip=${this.dragWithClip}
            .defaultClipPath=${this.defaultClipPath}
            .clipTargetBounds=${this.clipTargetBounds}
            .snapThreshold=${5}
            .keepRatio=${this.keepRatio}
            @litDrag=${this.onDrag}
            @litClip=${this.onClip}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
    }
    onClip(e) {
        e.target.style.clipPath = e.clipStyle;
    }
}