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 {
    containerRef: Ref<HTMLDivElement> = createRef(null);
    targetRef: Ref<HTMLDivElement> = createRef(null);
    moveableRef: Ref<Moveable> = createRef(null);
    render() {
        return html `<div
    class="root"
    style="display: flex;justify-content: center;align-items: center;width: 700.2px;height: 700.2px;"
>
    <div
        ${ref(this.containerRef)}
        class="container2"
        style="width: 299px;height: 299px;outline: 10px solid #ccc;"
    >
        <div
            class="target2"
            ${ref(this.targetRef)}
            style="width: 100px;height: 100px;"
        >Target</div>
        <lit-moveable
            ${ref(this.moveableRef)}
            .target=${this.targetRef}
            .litDraggable=${true}
            .edgeDraggable=${false}
            .startDragRotate=${0}
            .throttleDragRotate=${0}
            .keepRatio=${false}
            .throttleScale=${0}
            .snappable=${true}
            .snapDirections=${{
            top: true,
            left: true,
            bottom: true,
            right: true,
            center: true,
            middle: true
        }}
            .elementSnapDirections=${{
            middle: true,
            center: true,
            top: true,
            left: true,
            bottom: true,
            right: true
        }}
            .snapThreshold=${5}
            .elementGuidelines=${[this.containerRef]}
            @litDrag=${this.onDrag}
            @litScale=${this.onScale}
        ></lit-moveable>
    </div>
</div>`;
    }
    onDrag(e) {
        e.target.style.transform = e.transform;
        this.targetRef.value!.innerText = e.transform;
    }
    onScale(e) {
        e.target.style.transform = e.drag.transform;
    }
}