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 {
    targetRef: Ref<HTMLDivElement> = createRef(null);
    render() {
        return html `<div class="container">
    <div class="nested first">
        No Transform
        <div class="nested scale">
            scale(1.5, 1.5)
            <div class="nested rotate">
                rotate(30deg)
                <div
                    class="target"
                    ${ref(this.targetRef)}
                >Target</div>
            </div>
        </div>
    </div>
    <lit-moveable
        .target=${this.targetRef}
        .litDraggable=${true}
        .throttleDrag=${0}
        .startDragRotate=${0}
        .throttleDragRotate=${0}
        .zoom=${1}
        .origin=${true}
        .padding=${{ left: 0, top: 0, right: 0, bottom: 0 }}
        .clippable=${true}
        .clipRelative=${false}
        .clipArea=${false}
        .dragWithClip=${false}
        .defaultClipPath=${"inset"}
        .clipTargetBounds=${true}
        .clipVerticalGuidelines=${[0, 100, 200]}
        .clipHorizontalGuidelines=${[0, 100, 200]}
        .snapThreshold=${5}
        @litClip=${this.onClip}
        @litRender=${this.onRender}
    ></lit-moveable>
</div>`;
    }
    onClip(e) {
        if (e.clipType === "rect") {
            e.target.style.clip = e.clipStyle;
        } else {
            e.target.style.clipPath = e.clipStyle;
        }
    }
    onRender(e) {
        e.target.style.transform = e.transform;
    }
}